Question

I’m trying to make a ‘select all’ style checkbox in jQuery. here is current markup:

<table>
  <thead>
     <tr>
       <th><input class='select-all' type='checkbox' /></th>
        //etc..
     </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class='list-select' type='checkbox' /><td>
     //etc..
    </tr>
    //more <tr>s..
  </tbody>
</table>

what’s the easiest way to get all of the ‘list-select’ checkboxes from the click event of the select all checkbox?

$(".select-all").click(function() {

});

There could be more than one of these on the page, so it has to be relative. i.e. I can’t just use $(".list-select")

Answer 1

Here’s a quick fiddle example: http://jsfiddle.net/ru3Nv/

At the core is:

$('.select-all').click(function(){
    $(this).parents('table').find('.list-select').prop("checked", $(this).prop("checked"));
});

Note that I’d also recommend adding listeners on the .list_select boxes so that if any of them become unchecked, the select all becomes unchecked, and if all of them are checked individually then the select all becomes checked as well.