Count the number of checked checkboxes in HTML

Question

So basically i want to count the number of checkboxes that are ticked. I get my code to the point where it counts them successfully, but I want to put in an alert that shows the number of checkboxes ticked, the code does this but doesn't show the total count, it increments the total every refresh. I just want to know how I can show a total count.

It should display the total when the radio button 'yes' is clicked.

<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"

function checkboxes(){
    var inputElems = document.getElementsByTagName("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
        count++;
        alert(count);
    }
}}

Solution 1

This should do the trick:

alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

Solution 2

try this using jquery

Method 1:

alert($('.checkbox_class_here :checked').size());

Method 2:

alert($('input[name=checkbox_name]').attr('checked'));

Method: 3

alert($(":checkbox:checked").length);

Solution 3

Try this code

 <br />Apples
                <input type="checkbox" name="fruit" checked/>Oranges
                <input type="checkbox" name="fruit" />Mango
                <input type="checkbox" name="fruit" />

                <br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />

Javascript

     function checkboxes()
      {
       var inputElems = document.getElementsByTagName("input"),
        count = 0;

        for (var i=0; i<inputElems.length; i++) {       
           if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
              count++;
              alert(count);
           }

        }
     }

FIDDLE DEMO

Solution 4

Thanks to Marlon Bernardes for this. alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

If you have more than one form with different checkbox names in each, the above code will count all checkboxes in all forms.

To get over this, you can modify it to isolate by name.

var le = document.querySelectorAll('input[name="chkboxes[]"]:checked').length;

Solution 5

The initial code was very nearly right. the line alert(count); was in the wrong place. It should have come after the second closing brace like this:-

 function checkboxes()
  {
   var inputElems = document.getElementsByTagName("input"),
    count = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
          count++;
       }
    }
    alert(count);
 }

In the wrong place it was giving you an alert message with every checked box.

View more solutions