How to count the total number of selected checkboxes in an HTML table

Question

How can i count the number of the selected checkboxes from this table:

<tbody>
    <tr>
        <td>
            <center>
                <form>
                    <input type="checkbox" value="<?php echo $rws['amount']; ?>" />
                </form>
            </center>
        </td>
    </tr>
</tbody>

either there is only one or you have invalid html markup. A form cannot start in a tablecell and end in a different one - not that the form above is even closed. — Professor Abronsius, Sep 05 '16 at 16:10
Using jquery it is easy to make: `$('table').find(':checkbox').length` — yceruto, Sep 05 '16 at 16:13

score 2 · Answer 1 · edited Sep 23 '17 at 01:38

querySelectorAll lets you get a list of elements matching any CSS selector, so you can use that to get the checkboxes. You can use Array.prototype.reduce on it in order to count the number of them that are checked. So:

var count = Array.prototype.reduce.call(
    document.querySelectorAll("input[type=checkbox]"),
    function(sum, cb) {
        return sum + cb.checked ? 1 : 0;
    },
    0
);

The "array-like" part of this answer explains that use of Array.prototype.reduce that lets us treat the list from querySelectorAll as though it were an array when it isn't.

MDN has a description of how reduce works.

how can i add the total amount of all selected chect boxes – R.rere Sep 05 '16 at 16:16 — R.rere, Sep 05 '16 at 16:16

How to count the total number of selected checkboxes in an HTML table

1 Answers1