javascript few checkbox checked, but count as one

Sigmahokies · June 22, 2018

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

JMRKER · June 22, 2018

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 June 22, 2018 by JMRKER

Sigmahokies · June 23, 2018

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

Sigmahokies · June 23, 2018

Hey, hey! I just fixed what I want.

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

dsonesuk · June 23, 2018

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.

JMRKER · June 23, 2018

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.

dsonesuk · June 24, 2018

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>

Sigmahokies · June 24, 2018

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

Sigmahokies · June 24, 2018

Here example look like:

dsonesuk · June 25, 2018

<!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>

davej · June 25, 2018

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?

dsonesuk · June 25, 2018

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.

javascript few checkbox checked, but count as one

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in