如何计算动态表中的复选框数量
我正在尝试count一个动态表中检查的checkboxes的数量，该表根据数据库文件更改size。
出于测试目的，每当checkbox为checked时，它将警告counter是否增加，或者相反，如果checkbox为unchecked，则counter减少。
问题是checkboxes根据第一个row的checkbox递增/递减。例如，如果第一个row中的第一个checkbox是checked，并且您从不同的3 rows中选中了另外3个checkboxes，则它将递增并显示"4"。
如果第一行中的复选框是unchecked，但您选中了3 other checkboxes in 3 different rows，它将警告"-3“。您将如何编辑代码，使其正确地counts of checked checkboxes
<table id="myTable">
<tr>
<th>Check</th>
<th>Date</th>
<th>User</th>
<th>Status</th>
<th>UPC</th>
</tr>
{% for item in data %}
<tr>
<td><label><input type="checkbox" id="myCheck" onchange="countChecks()"></label></td>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
</tr>
{% endfor %}
</table>
<script>
counter = 0;
function countChecks() {
if (document.getElementById('myCheck').checked == true) {
counter += 1;
alert(counter);
}
if (document.getElementById('myCheck').checked == false) {
counter -= 1;
alert(counter);
}
}
</script>回答 3
Stack Overflow用户
发布于 2019-01-16 00:00:31
我认为你可以这样做：
document.querySelectorAll('input[type="checkbox"]:checked').length这将为您提供选中的复选框的数量。
Stack Overflow用户
发布于 2019-01-16 00:03:32
问题是document.getElementById('myCheck')只返回第一个节点，这就是为什么它返回-3，它数'-1‘三次。您可以这样检查：document.getElementById('myCheck').lenght (这将返回1，因为它只选择ID的第一个重合)。
您可以这样解决这个问题:在复选框中添加一个类，然后在countChecks函数中，通过类document.getElementsByClassName("example");选择项，并迭代它们以进行计数。
Stack Overflow用户
发布于 2019-01-16 00:04:18
您的第一个问题是，您似乎使用相同的id生成了多个DOM元素。相反，可以考虑使用classes。然后，您可以使用查询选择器来获取该类中所有被选中的项，并输出匹配的项数。
function countChecks() {
const checked = document.querySelectorAll('.myCheck:checked');
console.log(checked.length);
}<table>
<tr>
<td><label><input type="checkbox" class="myCheck" onchange="countChecks()"></label></td>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
</tr>
<tr>
<td><label><input type="checkbox" class="myCheck" onchange="countChecks()"></label></td>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
</tr>
<tr>
<td><label><input type="checkbox" class="myCheck" onchange="countChecks()"></label></td>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
</tr>
</table>
https://stackoverflow.com/questions/54202378
复制相似问题
腾讯云开发者
