Sigmahokies Posted June 22, 2018 Share Posted 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 Link to comment Share on other sites More sharing options...
JMRKER Posted June 22, 2018 Share Posted June 22, 2018 (edited) 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 1 Link to comment Share on other sites More sharing options...
Sigmahokies Posted June 23, 2018 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Sigmahokies Posted June 23, 2018 Author Share Posted 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2018 Share Posted 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. Link to comment Share on other sites More sharing options...
JMRKER Posted June 23, 2018 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2018 Share Posted 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> Link to comment Share on other sites More sharing options...
Sigmahokies Posted June 24, 2018 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Sigmahokies Posted June 24, 2018 Author Share Posted June 24, 2018 Here example look like: Link to comment Share on other sites More sharing options...
dsonesuk Posted June 25, 2018 Share Posted 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> 1 Link to comment Share on other sites More sharing options...
davej Posted June 25, 2018 Share Posted 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 25, 2018 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now