Question

How do I do a selection on a existing selection in jQuery?
This is the given HTML

<div id='search'>
    <form action='' method='GET'>
        <input id="searchbutton" type='submit' name='qs' value='search'>
            <div id="searchoptions">
                <input type="checkbox" checked="checked" id="search_books book" name="search_books" value="1" /><label for="search_books">book</label>
                <input type="checkbox" checked="checked" id="search_movies movie" name="search_movies" value="1" /><label for="search_movies">movies</label>
            </div>
    </form>
</div>

The jQuery part:

$('#search').each(function(){
    //do stuff
    $(this).click(function(){
        alert('checkbox clicked');
    });
});

Of curse the click function triggers if the div gets clicked.
But I’d like it to get triggered if the checkbox is clicked.
I could just do
$(‘#search input:checkbox’)
but I need to do some stuff with #search first.
So how to I append a selector to $(this)?

e.g. $(this’input:checkbox’)

Sorry if it’s a fools question.

Answer 1

You would use .find() in this case, for example:

$(this).find(':checkbox');
//equiavlent to $('#search :checkbox')

There are many other tree traversal methods like this as well.

You can also do: $(':checkbox', this) but that’s really just converted to the above by jQuery under the covers, so better to do it yourself IMO.