Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to jQuery select <td> with only a checkbox in it

The Goal

I want to select <td> elements that contain only a checkbox. I want to do this with a single selector (not using chaining or logic outside the selector) so that I can use the selector with jQuery functions like live or delegate.

The bigger pictures is that I want to listen for a click event on these <td>s and pass the click event on to the checkbox, thus creating a larger clicking area. This is important, because the <tr> also has a different click event that I don't want to activate when users click and miss the checkbox.

The specifics

I created a jsfiddle with an example scenario: http://jsfiddle.net/ytA3X/

This is what I started with that is not working. In other words, select any td element that has a checkbox but does not have anything that is not a checkbox.

$('td:has(:checkbox):not(:has(:not(:checkbox)))')
=> []

:not(:has(...)) works in my jsfiddle example.

:has(:not(...)) works in my jsfiddle example.

:not(:has(:not(...))) always seems to select nothing.

Is there a different way that I can select td elements with only a checkbox, or am I doing something wrong?

like image 863
Edward Anderson Avatar asked May 29 '12 17:05

Edward Anderson


2 Answers

How about using :only-child:

$('td:has(:checkbox:only-child)')...

JSFiddle

like image 139
Evan Mulawski Avatar answered Nov 14 '22 22:11

Evan Mulawski


You can use the only-child selector:

$('td:has(:checkbox:only-child)')

Here it is in use with your markup.

like image 27
FishBasketGordo Avatar answered Nov 14 '22 23:11

FishBasketGordo