Question

I have a table setup like this:

<table>
    <thead>
        <th>
            <input type="checkbox" class="check-all" />
        </th>
        <th>
            Title
        </th>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 2</td>
        </tr>
    </tbody>
</table>

I’m trying to have it so when the checkbox in the header with class ‘check-all’ is checked, it checks all the checkboxes below.

This is what I have, but it doesn’t seem to work

        $('.check-all').click(
        function(){
            $(this).parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
        }
    )

Any ideas? Thank you!

Answer 1

First you should use jQuery.closest() to find the closest table tag.

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").attr('checked', this.checked);   
 });

Second. If you are using jQuery 1.6 or higher you should use jQuery.prop()

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").prop('checked', this.checked);   
 });

Finally, for a boolean value from the check-all box you do not need the jQuery object you can simply use HTML DOM this.checked