Javascript 如何计算动态表中的复选框数

我正在尝试

计数
动态表中已选中的
复选框的数量，该动态表的大小根据数据库文件的不同而变化

出于测试目的，每次选中
复选框
时，它都会提醒
计数器
是否递增，或者相反，如果
复选框
未选中
，则
计数器
递减

问题在于，
复选框
根据第一行的
复选框
递增/递减。例如，如果选中了第一行
中的第一个
复选框
，并且您从
3
不同的
行中选中了3个额外的
复选框
，它将递增并发出
警报
“4”

如果第一行中的复选框未选中
，但您在
3
不同的
行

中选中了其他复选框，它将发出警报“-3”。如何编辑代码，使其正确计数已选中的

复选框的数目

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


检查
日期
使用者
地位
UPC
{数据%中的项的%1}
{{item[0]}
{{项目[1]}
{{项目[2]}
{{项目[3]}
{%endfor%}
计数器=0；
函数countChecks（）{
if（document.getElementById（'myCheck'）。checked==true）{
计数器+=1；
警报（计数器）；
}
if（document.getElementById（'myCheck'）。checked==false）{
计数器-=1；
警报（计数器）；
}
}
我想你可以：

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

这将为您提供选中复选框的数量。
问题在于
document.getElementById（'myCheck'）
只返回第一个节点，这就是为什么它会向您返回-3，计数“-1”三次。您可以通过以下方式进行检查：
document.getElementById（'myCheck'）.Length
（这将返回1，因为它只选择ID的第一个符合项）

您可以这样解决：将一个类添加到复选框中，并在
countChecks
函数中按类
文档选择项并迭代计数。
您的第一个问题是似乎生成了多个具有相同id的DOM元素。相反，考虑使用<代码>类< /代码>。然后，您可以使用查询选择器获取该类中所有选中的项，并输出匹配项的数量


函数countChecks（）{
const checked=document.querySelectorAll（'.myCheck:checked'）；
控制台。日志（已检查。长度）；
}

{{item[0]}
{{项目[1]}
{{项目[2]}
{{item[0]}
{{项目[1]}
{{项目[2]}
{{item[0]}
{{项目[1]}
{{项目[2]}
您可以在下一个答案中检查“为什么”它以前不起作用！如果@Maria解决了您的问题，请将她的答案标记为正确！啊，非常感谢你的解释，我理解为什么我的逻辑现在没有意义。谢谢你，这个解释和所有其他的解释真的帮助我理解为什么我的逻辑是关闭的，我可以扩展工具use@Yuan-迅雷没问题！