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

6 个解决方案

#1

This should do the trick:

这应该是诀窍:

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

#2

try this using jquery

使用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);

感谢Marlon Bernardes。警报(document.querySelectorAll( '输入[类型= “复选框”]:检查')的长度。);

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;

#1