Geek asks and answers

How jQuery select <td> only using checkbox

purpose

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

The big shots are that I want to listen to the click event on these <td>and pass the click event to the checkbox, thereby creating a large click area. This is important because it <tr>also has another click event that I don’t want to fire when users click and skip this check box.

Features

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

Here's what I started with what doesn't work. In other words, select any td element that has a flag but has nothing that is not a flag.

$('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 chooses nothing.

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

+5
source share
4 answers

How about using :only-child:

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

Jsfiddle

+8
source

Do not do this with a single selector, this will make your code difficult to read and extremely difficult to maintain and debug.

$('td:has(input[type="checkbox"])').filter(function(){
    return $(this).children().length === 1
});

Live demo

+2
source

only-child:

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

.

+2

Instead, you can simply use .notand split it into two separate selectors:

http://jsfiddle.net/ytA3X/1/

+1
source

More articles:


All Articles