jQuery how to specify an existing selector

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

use your parent() and children() methods. You can specify selectors as arguments.

$(this).children(':checkbox');

Answer 2

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.

Answer 3

Use .find().

On another note, there's no reason to use .each() on $('#search') because that selector will only ever return 1 element, since HTML element IDs must be unique.

Answer 4

Define a variable to contain your result set.

var $myVar = $('#search');

Then use the .add() method.

$myVar = $myVar.add($('#search input:checkbox'));
$myVar.click(function(){
    alert('div or checkbox clicked');
});

Answer 5

You can use

$(":checkbox", $(this));

where the second parameter is the context on which to search for elements which match the selector.

So

$(":checkbox", $(this)).click(function(){
    alert('checkbox clicked');
});