Question

Just needing a little help here. To start off, here’s what my HTML looks like:

<div>
<table id="table" width="100%">
<tr>
    <th><input type="checkbox" />Select All</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
</tr>
</table>
</div>

There’s 5 more tables like this in a single page and what I’m meaning to do is that when the <th> checkbox is ticked on a certain table, only the <td> checkboxes within that certain table will be checked. Any help on how this will be done would be greatly appreciated.

Answer 1

You can get bind a change event handler to all checkboxes that are descendants of a th element, and then check all checkboxes that are descendants of the closest table:

$("th :checkbox").change(function() {
    $(this).closest("table").find(":checkbox").prop("checked", true);
});

Here’s a working example with 2 tables. If you want the checkbox in the th to uncheck all the other checkboxes too, then you can do this, using the second argument of prop (thanks @SalmanA):

$("th :checkbox").change(function() {
    $(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
});