How to count number of checkboxes in a dynamic table

Question

I'm trying to count the number of checkboxes that have been checked in a dynamic table that changes size , depending on a database file.

For testing purposes, every time a checkbox is checked , it will alert whether the counter incremented, or conversely, if a checkbox is unchecked , the counter decrements.

The problem is that the checkboxes increments/decrements depending on the checkbox of the very first row . For example if the first checkbox in the first row is checked and you check 3 additional checkboxes from 3 different rows , it will increment and alert "4" .

If the checkbox in the first row is unchecked , but you check 3 other checkboxes in 3 different rows , it will alert "-3". How would you edit the code so that it correctly counts the number of checked checkboxes ?

<table id="myTable">
    <tr>
        <th>Check</th>
        <th>Date</th>
        <th>User</th>
        <th>Status</th>
        <th>UPC</th>
    </tr>
    {% for item in data %}
    <tr>
        <td><label><input type="checkbox" id="myCheck" onchange="countChecks()"></label></td>
        <td>{{item[0]}}</td>
        <td>{{item[1]}}</td>
        <td>{{item[2]}}</td>
        <td>{{item[3]}}</td>
    </tr>
    {% endfor %}
</table>

<script>
    counter = 0;

    function countChecks() {
        if (document.getElementById('myCheck').checked == true) {
            counter += 1;
            alert(counter);
        }
        if (document.getElementById('myCheck').checked == false) {
            counter -= 1;
            alert(counter);
        }
    }
</script>

Answer 1

I think you can just do:

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

This will give you the number of checked checkboxes.

Answer 2

The problem is that document.getElementById('myCheck') only returns you the first node, that's why it returns -3 to you, it counts '-1' three times. You can check thisway: document.getElementById('myCheck').lenght (this will return 1 as it only select the first coincidence to the ID).

You can solve it this way: add a class to the checkboxes and in the countChecks function you select the items by class document.getElementsByClassName("example"); and iterate them to count.

Answer 3

Your first issue is you seem to be generated multiple DOM elements with the same id . Instead, consider using classes . Then, you can use a query selector to get all in that class that are checked and output the number of items that match.

 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>