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

初始代码非常接近正确。这条线警报（计数）; 是在错误的地方。它应该在第二个结束支架之后出现： -

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

Answer 6

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>

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

6 个答案: