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>
```
Add an `onChange=handleCheckbox()` to your checkboxes 

```
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);
        }
    }}

```