Question

HTML:

<table class="responsive" id="products">
    <a href="#" id="checkAllProducts">Do it</a>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</table>

​JS:

$(document).ready(function(){
  $('#checkAllProducts').click(function(){
    var checkbox = $('#products input:checkbox');
    checkbox.attr('checked',!checkbox.attr('checked'));
  });
});​

It’s available for debugging here.

Code works if I do var checkbox = $('input:checkbox');. Problem is likely to be in selector

This code should check all checkboxes after clicking link. But it doesn’t do it. Why?

Answer 1

As far as I know a table can contain any block level or inline element, as long as the table is properly formatted. The problem is that a table has to have stuff like td, tr and shit, to define it’s lines and rows, and if you try:

<table class="responsive" id="products">
    <tr>
        <td>
            <a href="#" id="checkAllProducts">Do it</a>
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </td>
    </tr>
</table>

it will work just fine, and then you can do:

$(function(){
  $('#checkAllProducts').on('click', function(e){
      e.preventDefault();
      var checkbox = $('#products input[type="checkbox"]');
      checkbox.prop('checked', !checkbox.prop('checked'));
  });
});

FIDDLE​​​