Jump to content
Sigmahokies

few checkbox checked, but count as one

Recommended Posts

Hi everyone,

I'm wondering it is possible to have few checkbox checked but count as one? For example, I put three checkbox on html, then checked two of three, but will count as one. Suppose I have group of checkbox, but considered count one from three checkbox checked. it will be very appreciate if you can help.

Thanks,

Gary

Share this post


Link to post
Share on other sites

Sure, why not?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> HTML5 page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 fieldset { width: 10em; }
</style>
</head>
<body>

<fieldset id="GC"> <legend>Group Count</legend>
 <input type="checkbox" value="4"> 2<sup>2</sup>
 <input type="checkbox" value="2"> 2<sup>1</sup>
 <input type="checkbox" value="1"> 2<sup>0</sup>
</fieldset>
<input type="button" value="Submit Group Count" id="submit">

<script>
function summate() {
  var sel = document.getElementById('GC').querySelectorAll('input'),
      sum = 0;
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { sum += Number(sel[i].value); }
  } // return sum;
  alert('Sum: '+sum);
}
function init() {
  document.getElementById('submit').addEventListener('click',summate);
} init();
</script>
</body>
</html>

 

Edited by JMRKER
  • Thanks 1

Share this post


Link to post
Share on other sites

That is not what I am asking for. I am asking for to have few checkbox have been checked, but count as one. For example, If I put nine checkboxes on website, then I divide nine checkboxes into three group: Three checkboxes in one group, then three checkboxes in second group, then three checkboxes in third group, suppose someone click checkboxes two out of three checkboxes in first group, click one out of three checkboxes in second one, then click two out of three checkboxes in third one, so script would count three checked because it showed someone did it all nine checkboxes which divided into three group that will count as three checked. Get it?

Please forgive me, English is not my primary language, it is my second language. My primary language is ASL.

Thanks,

Gary

Share this post


Link to post
Share on other sites

I don't see how that would work with 3 different named groups of checkboxes? it sums up selected checkbox values of groups, not the number of groups selected.

Share this post


Link to post
Share on other sites
3 hours ago, Sigmahokies said:

Hey, hey! I just fixed what I want. 

all i have to remove "+" from =. it count as one! Thank you so much!

Well, I'm glad it solved your problems, but I don't know how it did.

Can you give an example of the HTML layout with 3 groups of 3 checkbox and show how clicking on 2 and 1 and 2 in each of the groups (A,B,C) makes a total of 9 checked boxes?

... "so script would count three checked because it showed someone did it all nine checkboxes which divided into three group that will count as three checked. Get it? "

Nope, I don't get it.  I'm glad it worked for you, but I don't understand how.

Share this post


Link to post
Share on other sites

If you mean three different attribute named grouped value checkbox inputs of three of each

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
        <style>
            #wrap {width: 20%; margin: 0 auto;}
            form {border:3px solid #ccc; padding: 15px; margin: 10px;}
            .single-count{}
        </style>
    </head>
    <body>
        <div id="wrap">
            <form name="myForm" action="#">
                <label>chkboxGrp1</label>
                <input class="single-count" type="checkbox" name="chkboxGrp1[]" value="1" />
                <input class="single-count" type="checkbox" name="chkboxGrp1[]" value="2" />
                <input class="single-count" type="checkbox" name="chkboxGrp1[]" value="3" />
                <hr>
                <label>chkboxGrp2</label>
                <input class="single-count" type="checkbox" name="chkboxGrp2[]" value="4" />
                <input class="single-count" type="checkbox" name="chkboxGrp2[]" value="5" />
                <input class="single-count" type="checkbox" name="chkboxGrp2[]" value="6" />
                <hr>
                <label>chkboxGrp3</label>
                <input class="single-count" type="checkbox" name="chkboxGrp3[]" value="7" />
                <input class="single-count" type="checkbox" name="chkboxGrp3[]" value="8" />
                <input class="single-count" type="checkbox" name="chkboxGrp3[]" value="9" />

            </form>

            <div>Checkbox group total selected: <span id="chkboxGroupCount">0</span></div>
            <div>Selected: <span id="chkboxSelected"></span></div>

        </div>
        <script>
            var chkbox = document.getElementsByClassName('single-count');
            for (var i = 0; i < chkbox.length; i++) {

                chkbox[i].addEventListener('click', chkboxGrpCount);

            }

            function chkboxGrpCount() {
                var inputNameArray = [];
                for (var i = 0; i < chkbox.length; i++) {
                    var chkBoxNameStripSqrBraces = chkbox[i].name.replace('[]', '');
                    if (inputNameArray.indexOf(chkBoxNameStripSqrBraces) === -1 && chkbox[i].checked === true) {

                        inputNameArray.push(chkBoxNameStripSqrBraces);

                    }

                }
                document.getElementById('chkboxGroupCount').innerHTML = inputNameArray.length;
                document.getElementById('chkboxSelected').innerHTML = inputNameArray.toString();
            }
        </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites
19 hours ago, JMRKER said:

Well, I'm glad it solved your problems, but I don't know how it did.

Can you give an example of the HTML layout with 3 groups of 3 checkbox and show how clicking on 2 and 1 and 2 in each of the groups (A,B,C) makes a total of 9 checked boxes?

I found out, it is not exactly work I want. It just followed the value, that is not what I want because I need those value to insert in database by PHP. 
I'm trying to put three checkbox, then suppose someone click one or two or three checkbox, then count as one. For example, you checked two checkbox in first group, then javascipt will count this as one, then next to second group has three checkbox, then click one or two or three in second group, then count as one that will be total of count will be two. Get it?

Thanks,
Gary

 

 

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
        <style>
            #wrap {width: 20%; margin: 0 auto;}
            /*  form {border:3px solid #ccc; padding: 15px; margin: 10px;}*/
            form > table {width: 100%;}
            .single-count{}
            .text-right{text-align: right;}
            .vert-middle {vertical-align: middle; text-align: center;}

        </style>
    </head>
    <body>
        <div id="wrap">
            <form name="myForm" action="#">
                <table border="1" cellpadding="2" cellspacing="2">
                    <tr>
                        <td style="width:80%;">(YB)Go/Walk-To/From</td>
                        <td style="width:10%;"><input class="single-count" type="checkbox" name="chkboxGrp0[]" value="1" /></td>
                        <td class="vert-middle" style="width:10%;">0</td>
                    </tr>
                    <tr>
                        <td>(YB)Bring-Stack-Comic</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp1[]" value="1" /></td>
                        <td class="vert-middle">0</td>
                    </tr>
                    <tr>
                        <td colspan="3">(YB)Pick-up</td>
                    </tr>
                    <tr>
                        <td class="text-right">TV-Remote</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp2[]" value="1" /></td>
                        <td class="vert-middle" rowspan="4">0</td>
                    </tr>
                    <tr>
                        <td class="text-right">Cup & Cookies</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp2[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td class="text-right">Comic</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp2[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td class="text-right">Video-Controller</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp2[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td>(YB)Hold-Milk-Carton</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp3[]" value="1" /></td>
                        <td class="vert-middle">0</td>
                    </tr>
                    <tr>
                        <td>(YB)Pour-Cup</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp4[]" value="1" /></td>
                        <td class="vert-middle">0</td>
                    </tr>
                    <tr>
                        <td colspan="3">(YB)Carry-X</td>
                    </tr>
                    <tr>
                        <td class="text-right">Cup & Cookies</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp5[]" value="1" /></td>
                        <td class="vert-middle" rowspan="3">0</td>
                    </tr>
                    <tr>
                        <td class="text-right">Comic</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp5[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td class="text-right">Video-Controller</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp5[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td colspan="3">(YB)Hold-X</td>
                    </tr>
                    <tr>
                        <td class="text-right">TV-Remote</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp6[]" value="1" /></td>
                        <td class="vert-middle" rowspan="3">0</td>
                    </tr>
                    <tr>
                        <td class="text-right">Cup & Cookies</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp6[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td class="text-right">Video-Controller</td>
                        <td><input class="single-count" type="checkbox" name="chkboxGrp6[]" value="1" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="font-weight: bolder;" class="text-right">Total Group Selected</td>
                        <td style="text-align: center; font-weight: bolder;" class="text-right"><span id="chkboxGroupCount">0</span></td>
                    </tr>

                </table>
            </form>
            <div>Selected: <span id="chkboxSelected">None!</span></div>

        </div>
        <script>
            var chkbox = document.getElementsByClassName('single-count');
            var chkboxTotal = document.getElementsByClassName('vert-middle');
            for (var i = 0; i < chkbox.length; i++) {
                chkbox[i].checked = false;
                chkbox[i].addEventListener('click', chkboxGrpCount);

            }

            function chkboxGrpCount() {
                for (var i = 0; i < chkboxTotal.length; i++) {

                    chkboxTotal[i].innerHTML = "0";
                }
                var inputNameArray = [];
                for (var i = 0; i < chkbox.length; i++) {
                    var chkBoxNameStripSqrBraces = chkbox[i].name.replace('[]', '');

                    if (inputNameArray.indexOf(chkBoxNameStripSqrBraces) === -1 && chkbox[i].checked === true) {
                        chkboxTotal[parseInt(chkBoxNameStripSqrBraces.replace('chkboxGrp', ''))].innerHTML = "1";
                        inputNameArray.push(chkBoxNameStripSqrBraces);

                    }


                }
                document.getElementById('chkboxGroupCount').innerHTML = inputNameArray.length;
                if (inputNameArray.length === 0) {
                    document.getElementById('chkboxSelected').innerHTML = "None!";
                    document.getElementById('chkboxSelected').style.color = "black";
                }
                else
                {
                    document.getElementById('chkboxSelected').innerHTML = inputNameArray.toString();
                }
                if (inputNameArray.length !== chkboxTotal.length) {
                    document.getElementById('chkboxSelected').style.color = "red";
                }
                else
                {

                    document.getElementById('chkboxSelected').innerHTML = "ALL Selected";
                }

            }
        </script>
    </body>
</html>

 

  • Thanks 1

Share this post


Link to post
Share on other sites
On 6/23/2018 at 2:23 PM, Sigmahokies said:

That is not what I am asking for. I am asking for to have few checkbox have been checked, but count as one. For example, If I put nine checkboxes on website, then I divide nine checkboxes into three group: Three checkboxes in one group, then three checkboxes in second group, then three checkboxes in third group, suppose someone click checkboxes two out of three checkboxes in first group, click one out of three checkboxes in second one, then click two out of three checkboxes in third one, so script would count three checked because it showed someone did it all nine checkboxes which divided into three group that will count as three checked. Get it?

 

You want a Php variable to count up the checkboxes in this manner, but don't you also want to know which exact checkboxes were checked?

Share this post


Link to post
Share on other sites

You can send both the number and which were checked (name attribute value shown in div) by using hidden inputs, then by using foreach() loop through checkbox $_POST and possible multiple values stored to them, with a nested foreach() loop.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×