计算 HTML 中选中复选框的数量
Posted
技术标签:
【中文标题】计算 HTML 中选中复选框的数量【英文标题】：Count the number of checked checkboxes in 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的可能重复 不同的问题@JohnCondedocument.querySelectorAll('input[type="checkbox"]:checked').length
【参考方案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 条警报消息。 @roroalert(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>【讨论】：
以上是关于计算 HTML 中选中复选框的数量的主要内容，如果未能解决你的问题，请参考以下文章