Question: I´m doing a management page for a learning institute as a homework of programming languages subject, and I need to make an assistance database and its frontend.
I made a table with students IDs, names and a column with checkboxes that you checked if that student is present.
I want to count the number of present students, let´s say, on-the-fly. I have found a lot of examples that counts checkboxes when you clicked a buttom or something like that like this ->[Count checkboxes...](https://stackoverflow.com/questions/22938341/count-the-number-of-checked-checkboxes-in-html), but I need another thing.
I want to show that number as I checked boxes in "realtime" without clicking another thing, in a text below like 'Total students Present: "n"', and n changes as you check each box.
I will be very greatful with any sugestion or tip.

Answer: 
Since you want to know how the function should work, I did not focus on UI. I do not know whether you are using JQuery, so I coded it in JavaScript.

```js
function studCheck() {
  let total = document.querySelectorAll('input[type="checkbox"]:checked').length;

  document.getElementById("totalStudents").innerHTML = "Total students Present: " + total;
}
```

```html
<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>
```
If you are doing it with pure JS+DOM, you need to add a `onchange` on each checkbox which calls a specified function in you JavaScript. This way, whenever the state of the checkbox changes (user clicks on it or uses keyboard to check it, whatever), your function is called.

The event will be passed to your function with it's `target` property being the checkbox DOM. there you can see which one it was by using it's `id` or `data-*` attribute you specified on checkboxes.

see [onChange on W3Schools](https://www.w3schools.com/jsref/event_onchange.asp) for more details.