Подсчет отмеченных флажков в реальном времени без отправки или каких-либо других действий в html5

Question

Я делаю страницу управления для учебного заведения в качестве домашней работы по предмету языков программирования, и мне нужно создать базу данных помощи и ее интерфейс. Я составил таблицу с идентификаторами учащихся, именами и столбцом с флажками, которые вы проверили, присутствует ли этот студент. Я хочу посчитать количество присутствующих студентов, скажем, на лету. Я нашел много примеров, которые подсчитывают флажки, когда вы нажимаете кнопку или что-то в этом роде -> Количество флажков ... , но мне нужна другая вещь. Я хочу показать это число, когда я установил флажки в «реальном времени», не щелкая другой элемент, в тексте ниже, например «Всего присутствующих студентов:« n »», и n изменяется при установке каждого флажка. Я буду очень благодарен за любые предложения и советы.

Answer 1

Добавьте onChange=handleCheckbox() к своим флажкам

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 2

Если вы делаете это с чистым JS + DOM, вам нужно добавить onchange на каждый флажок, который вызывает у вас указанную функцию JavaScript. Таким образом, всякий раз, когда состояние флажка изменяется (пользователь нажимает на него или использует клавиатуру для проверки, что угодно), ваша функция вызывается.

Событие будет передано вашей функции со свойством target являясь флажком DOM. там вы можете увидеть, какой это был, используя атрибут id или data-*, который вы указали в флажках.

см. onChange в W3Schools для получения более подробной информации.

Answer 3

Поскольку вы хотите знать, как должна работать эта функция, я не сосредоточился на пользовательском интерфейсе. Я не знаю, используете ли вы JQuery, поэтому я закодировал его в JavaScript.

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>