jQuery/Javascript: Check all checkboxes but within a specific table only

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.

James Allardice · Accepted Answer · 2011-10-26 09:38:14Z

4

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

edited Oct 26, 2011 at 9:38

answered Oct 26, 2011 at 9:26

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Salman Arshad Over a year ago

You can eliminate the if-else by ... .prop("checked", $(this).is(":checked"));

James Allardice Over a year ago

@SalmanA - Good call. I've edited the answer to use that instead. I always forget that one :)

MikeS Over a year ago

@James Does it matter if I have my tables wrapped in a div?

James Allardice Over a year ago

@MikeSanchez - No, that won't make any difference. The th :checkbox selector only cares about checkboxes in th elements, and the closest method will find the closest table and go no futher.

MikeS Over a year ago

@James Thanks for the help, buddy. I was using an outdated jQuery file which made it not work. It's all working now. Again, thanks.

|

Ghyath Serhal · Accepted Answer · 2011-10-26 09:25:49Z

1

Use the below jquery

$('input[Type="checkbox"]', $('#tableID')).prop("checked", true);

answered Oct 26, 2011 at 9:25

Ghyath Serhal

7,6326 gold badges47 silver badges63 bronze badges

Comments

Connell · Accepted Answer · 2011-10-26 09:41:33Z

1

$('#table input:checkbox').prop('checked', true);

To bind this event for each checkbox in the th tags (as in James Allardice's answer)

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

edited Oct 26, 2011 at 9:41

answered Oct 26, 2011 at 9:27

Connell♦

14.4k11 gold badges62 silver badges98 bronze badges

1 Comment

James Allardice Over a year ago

I think the OP wants it to apply separately to all of his 5 tables. This will only work for #table.

Collectives™ on Stack Overflow

jQuery/Javascript: Check all checkboxes but within a specific table only

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related