计算HTML中已选中复选框的数量

Question

所以基本上我想计算勾选的复选框的数量.我得到的代码到了成功计算它的位置,但是我想要显示一个警告,显示勾选的复选框的数量,代码执行此操作但不显示总计数,它会增加每次刷新的总数.我只想知道如何显示总数.

单击单选按钮"是"时,应显示总计.

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

Answer 1

这应该做的伎俩:

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

Answer 2

使用jquery尝试这个

方法1:

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

方法2:

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

方法:3

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

Answer 3

试试这个代码

 <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

Answer 4

感谢马龙·伯纳德斯 (Marlon Bernardes)。 alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

如果您有多个表单，每个表单的复选框名称不同，上面的代码将计算所有表单中的所有复选框。

为了解决这个问题，您可以修改它以按名称隔离。

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