jQuery/Javascript: Check all checkboxes on the following table

Question

My original javascript was:

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

which was used on a setting like this:

<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>

I slightly changed how my tables were and it now goes something like:

<table>
 <tr>
  <th><input type="checkbox" />select all</th>
 </tr>
</table>
<table>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
</table>

What do I need to change in my javascript so that when the checkbox in <th> is checked, all the checkboxes inside the <td>'s in the next table are checked?

Thanks.

Related to this post.

Rob W · Accepted Answer · 2011-12-30 14:19:00Z

2

Add .next() to .closest("table"):

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

$(this).closest("table") selects the table of the element matching th :checkbox. next() selects the next element, which is another table, in this case.

This code can break easily. I suggest to set an ID to the other table, and use the following code:

$(document).ready(function(){
 $("th :checkbox").change(function() {
    $("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
 });
});

answered Dec 30, 2011 at 14:19

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

3 Comments

MikeS Over a year ago

Tables will be generated from data in MySQL. Would that still work?

Rob W Over a year ago

Tables or rows? If there's only one table, the code works. Otherwise, you have to use: $(this).closest("table").nextAll("table").

MikeS Over a year ago

Gotcha. Thanks, @Rob W. You've been a great help.

Collectives™ on Stack Overflow

jQuery/Javascript: Check all checkboxes on the following table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related