计算 HTML 中选中复选框的数量答案

【问题标题】：Count the number of checked checkboxes in HTML计算 HTML 中选中复选框的数量
【发布时间】：2014-05-21 05:25:47
【问题描述】：

所以基本上我想计算被勾选的复选框的数量。我让我的代码达到成功计数的程度，但我想输入一个警报，显示勾选的复选框数量，代码执行此操作但不显示总计数，每次刷新都会增加总数。我只想知道如何显示总数。

当单击单选按钮“是”时，它应该显示总数。

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

【问题讨论】：

Javascript count checked checkbox的可能重复
不同的问题@JohnConde
document.querySelectorAll('input[type="checkbox"]:checked').length

标签： javascript html forms checkbox onchange

【解决方案1】：

这应该可以解决问题：

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

【讨论】：

alert(document.querySelectorAll('input:checked').length-1);
减一没有意义。 length 返回被勾选的复选框的数量（即数组的长度）
我把你的代码行放在 JSFiddle 中，它给了我打勾的方框 + 1 JSFiddle
它正在计算选中的复选框和单选按钮。由于您只想计算复选框，请使用alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
太聪明了！谢谢

【解决方案2】：

用 jquery 试试这个

方法一：

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

方法二：

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

方法：3

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

【讨论】：

是的需要javascript
虽然这是 Javascript，但从技术上讲，用户没有提到JQuery。你不应该假设人们正在使用他们没有提到的库。
对于遇到这个问题并正在使用 jQuery 的人来说，这仍然是一个有用的答案。如果OP没有提到它并不重要，答案是'尝试使用......'
PS，对于方法 1，:checked 和类名之间不需要空格。
在第一种方法中使用 length 代替 size() Deprecated

【解决方案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

【讨论】：

这就是我所没有的，除了“onClick”的变化。如果勾选了 3 个复选框，我正在尝试阻止弹出 3 条警报消息。
@roro alert(count); 放在循环之外。

【解决方案4】：

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

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

要克服这个问题，您可以将其修改为按名称隔离。

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

【讨论】：

SyntaxError: 'input[name="foo"]:checked' 不是有效的选择器 (Firefox 57)

【解决方案5】：

最初的代码几乎是正确的。线警报（计数）；是在错误的地方。它应该出现在第二个右大括号之后，如下所示：-

 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】：

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

【讨论】：

【解决方案7】：

function checkboxes(){
    var inputs = document.getElementsByTagName("input");
    var inputObj;
  var selectedCount = 0;
    for(var count1 = 0;count1<inputs.length;count1++) {
        inputObj = inputs[count1];
        var type = inputObj.getAttribute("type");
        if (type == 'checkbox' && inputObj.checked) {
            selectedCount++;
        }
    }
  alert(selectedCount);
}

<html>
  <body>Fruits
  <br />
  <input type="checkbox" name="fruit" checked/>Oranges
  <input type="checkbox" name="fruit" />Mango
  <input type="checkbox" name="fruit" />Apple
  <br />Yes
  <input type="radio" name="yesorno" id="yes"       onClick="checkboxes();"/>
  </body>
</html>

【讨论】：