Jason28 Posted December 15, 2008 Share Posted December 15, 2008 Hello, I tried seaching google but couldn't find anything that does the job. I have a list of checkboxes that a user can select items generated on the page. I would like javascript to display a counter so that when someone checks a box, it will display something on the html webpage that displays how many checkboxes the user checked. If you could provide the javascript function and the code to to display it on the page that would be great Thanks! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted December 15, 2008 Share Posted December 15, 2008 <html> <head> <script type="text/javascript"> function countCheckboxes ( ) { var form = document.getElementById('testForm'); var count = 0; for(var n=0;n < form.length;n++){ if(form[n].name == 'items[]' && form[n].checked){ count++; } } document.getElementById('checkCount').innerHTML = count; } window.onload = countCheckboxes; </script> </head> <body> <form name="testForm" id="testForm"> <input type="checkbox" name="items[]" value="a" onclick="countCheckboxes()" /> A<br /> <input type="checkbox" name="items[]" value="b" onclick="countCheckboxes()" /> B<br /> <input type="checkbox" name="items[]" value="c" onclick="countCheckboxes()" /> C<br /> <input type="checkbox" name="items[]" value="d" onclick="countCheckboxes()" /> D<br /> <input type="checkbox" name="items[]" value="e" onclick="countCheckboxes()" /> E<br /> <input type="checkbox" name="items[]" value="f" onclick="countCheckboxes()" /> F<br /> <input type="checkbox" name="items[]" value="g" onclick="countCheckboxes()" /> G<br /> <span id="checkCount"></span> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Jason28 Posted December 15, 2008 Author Share Posted December 15, 2008 Thanks a lot that works standalone, but I noticed my particular form uses checkbox names such as: name="chkbox_1" name="chkbox_2" name="chkbox_3" instead of: name="items[]" is there a way to make it work with that? Thanks Quote Link to comment Share on other sites More sharing options...
Jason28 Posted December 15, 2008 Author Share Posted December 15, 2008 Also, I used your code on another site, but noticed that it doesn't work in FireFox. Firebug gave the error: form is null countCheckboxes()site_script.js (line 24) onclick(click clientX=781, clientY=282)ZOeXDO%2...GFw%3D%3D (line 2) [break on this error] for(var n=0;n < form.length;n++) You don't have to answer my post above, if you could provide a fix for FireFox that would be great. Thanks! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted December 15, 2008 Share Posted December 15, 2008 works fine for me in FF: <html> <head> <script type="text/javascript"> function countCheckboxes ( ) { var form = document.getElementById('testForm'); var count = 0; for(var n=0;n < form.length;n++){ if(form[n].name.substr(0,7) == 'chkbox_' && form[n].checked){ count++; } } document.getElementById('checkCount').innerHTML = count; } window.onload = countCheckboxes; </script> </head> <body> <form name="testForm" id="testForm"> <input type="checkbox" name="chkbox_1" onclick="countCheckboxes()" /> A<br /> <input type="checkbox" name="chkbox_2" onclick="countCheckboxes()" /> B<br /> <input type="checkbox" name="chkbox_3" onclick="countCheckboxes()" /> C<br /> <input type="checkbox" name="chkbox_4" onclick="countCheckboxes()" /> D<br /> <input type="checkbox" name="chkbox_5" onclick="countCheckboxes()" /> E<br /> <input type="checkbox" name="chkbox_6" onclick="countCheckboxes()" /> F<br /> <input type="checkbox" name="chkbox_7" onclick="countCheckboxes()" /> G<br /> <span id="checkCount"></span> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Jason28 Posted December 15, 2008 Author Share Posted December 15, 2008 Ah sorry it works, I forgot to use id for the form when it already has "name=". One last question if you do not mind, I also use another javascript function that allows me to check all boxes at once. When I use it, the counter doesn't count the checked boxes, only if I click on one at a time. Is there a way to make it work with that one? If so I can post the function code. Thanks! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted December 15, 2008 Share Posted December 15, 2008 at the end of your checkAll function, call the new function: function checkAll ( ) { //Here is the code to check all of them countCheckboxes(); } Quote Link to comment Share on other sites More sharing options...
Jason28 Posted December 15, 2008 Author Share Posted December 15, 2008 Sweet it works! Man you rock Thanks! Quote Link to comment Share on other sites More sharing options...
Doesnotknow Posted April 20, 2014 Share Posted April 20, 2014 Hello, I tried this javascript and it works great, however wanted to check with you if this code can be made to count the checkmarks in different boxes on the same page. For example I have a box on the left that has options 1,2,3 and box on the right that has options a,b,c(could also be 1,2,3 if the same names are ok to use in two different forms), and get the result in the bottom of left box(for checks on the left box) and the results for the checks on the bottom of the right box for the right box. Also is it possible to have a submit button that will link to a page that the form with the most checks refers to? In other word if you click option 1 and 2 on the left, but click options a,b,c on the right and then in the end of the page click submit you can go to the page with the most clicks. I know it is much to ask, but any help will be apreciated. Also I could not find any examples of multple forms with checkboxes on the same page on the net, so I am sure this could be handy for others as well Quote Link to comment Share on other sites More sharing options...
ronhunter Posted April 10, 2015 Share Posted April 10, 2015 (edited) Hi I'm a newbie here and would appreciate any help you guys can give me. The solution above does mostly what I need but I don't understand how the output is displayed i.e. I cant control where the 'count' is displayed. Is there a way to have the output displayed in a textbox on the form so that I can display its value and use it in a cost calculation? Thanks in advance for any help here and I apologise if I am missing something really basic.... Ron Edited April 10, 2015 by ronhunter Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.