实时计数选中的复选框，而无需在html5中提交或执行任何其他操作

Question

我正在为一所学习机构做一个管理页面，作为编程语言学科的功课，我需要制作一个帮助数据库及其前端。我用学生ID，姓名和带有复选框的列制作了一个表格，您检查了该学生是否在场。我想计算一下当前的学生人数。我发现了很多示例，这些示例在您单击按钮或类似这样的东西-> Count checkboxes...时会计数复选框，但是我还需要另外一件事。我想在“实时”复选框中显示该数字，而无需单击其他内容，例如“在校学生总数：“ n””这样的文本，并且在选中每个复选框时n会发生变化。我会很高兴提出任何建议或提示。

Answer 1

function studCheck() {
  let total = document.querySelectorAll('input[type="checkbox"]:checked').length;
  
  document.getElementById("totalStudents").innerHTML = "Total students Present: " + total;
}

<table class="table">
  <thead>
    <tr>
      <th style="width: 50px">ID</th>
      <th style="width: 100px">Name</th>
      <th style="width: 50px">Attended</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Stud 1</td>
      <td><input type="checkbox" onchange="studCheck()"></td>
    </tr>
    <tr>
      <td>102</td>
      <td>Stud 2</td>
      <td><input type="checkbox" onchange="studCheck()"></td>
    </tr>
    <tr>
      <td>103</td>
      <td>Stud 3</td>
      <td><input type="checkbox" onchange="studCheck()"></td>
    </tr>
  </tbody>
</table>

<label id="totalStudents">Total students Present: 0</label>

Answer 2

function handleCheckbox(){
        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 3

该事件将以target属性作为复选框DOM传递给您的函数。您可以通过使用在复选框上指定的id或data-*属性来查看它是哪一个。

请参阅onChange on W3Schools了解更多详细信息。