Count the number of checked checkboxes in HTML

问题

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);
    }
}}

回答1:

This should do the trick:

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

回答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);

回答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

回答4:

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.

回答5:

var checkboxes = document.getElementsByName("fruit");
for(int i;i<checkboxes.length;i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);

回答6:

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;

来源：https://stackoverflow.com/questions/22938341/count-the-number-of-checked-checkboxes-in-html

标签

javascript

html

forms

checkbox

onchange