Question

我正尝试count的动态表中已检查的checkboxes的数量会改变size，具体取决于数据库文件。

出于测试目的，每次checkbox为checked时，它都会提醒counter是递增的，还是相反，如果checkbox是unchecked ，counter递减。

问题在于，checkboxes的增/减取决于第一个checkbox中的row。例如，如果第一个checkbox中的第一个row是checked，并且您从checkboxes个不同的3中检查了另外3个rows，它将递增和alert "4"。

如果第一行中的复选框为unchecked，但您在3中的其他checkboxes中选中了3的其他rows，则会提示“ -3 ”。您将如何编辑代码以使其正确地counts checked的数量？

checkboxes

Answer 1

我认为您可以做到：

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

这将为您提供选中复选框的数量。

Answer 2

问题在于document.getElementById('myCheck')仅返回您的第一个节点，这就是为什么它向您返回-3的原因，它的计数是“ -1”的三倍。您可以这样检查：document.getElementById('myCheck').lenght（这将返回1，因为它仅选择与ID的第一个重合）。

您可以通过以下方式解决：将一个类添加到复选框，然后在countChecks函数中按类document.getElementsByClassName("example");选择项目，然后对其进行迭代计数。

Answer 3

您的第一个问题是，您似乎会生成具有相同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>

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

3 个答案: