Skip to content Skip to sidebar Skip to footer

Jquery/javascript: Check All Checkboxes But Within A Specific Table Only

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

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

Solution 2:

Use the below jquery

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

Solution 3:

$('#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);
});

Post a Comment for "Jquery/javascript: Check All Checkboxes But Within A Specific Table Only"