Question

I need a selector that says:

Any table cell that has a checkbox in it

Right now, I’m using:

$('td input').filter(':checkbox').each(function() {
   $(this).closest('td').addClass('CursorPointer');
});
$('td.CursorPointer').on('click',function() {
   $('input:checkbox',this).click();
});

It works, but it might not be “best”.

Answer 1

Use the :has() selector or the has() method:

// select all <td> elements that have a checkbox in them
$('td:has(input:checkbox)');
// same effect
$('td').has('input:checkbox');

Note that input:checkbox is equivalent to input[type="checkbox"] in Sizzle/jQuery.

Your code sample could be rewritten as:

$('td:has(input:checkbox)').on('click', function() {
  $('input:checkbox', this).click();
});

Or…

$('td').has('input:checkbox').on('click', function() {
  $('input:checkbox', this).click();
});

Note that .has() is more efficient than :has: http://jsperf.com/jquery-has-vs-has Although :has() is slightly more readable IMHO.