JQuery: choosing the closest checkbox doesn't work

Question

I have a treelist containing several levels of checkboxes , and I'm trying to get the parent checkbox to display as 'checked' when I click any of the child checkboxes . For some reason this doesn't work and it kills me.

JAVASCRIPT

 $(function() { $("input.boundChild[type=checkbox]").click(function() { $(this).closest("input.boundParent").prop("checked", "checked"); }); }); 

HTML

 <ul> <li class="collapsed expanded"> <input id="0" class="boundParent" type="checkbox" > Australia <ul style="display: block;"> <li> <input id="0/" class="boundChild" type="checkbox" checked=""> <input type="hidden" value="Intel Australia PTY Ltd."> </li> </ul> </li> </ul> 

Answer 1

Items

input cannot have children, in your markup input.boundParent not one of the parents of input.boundChild . He is the brother of the ul element. you can use the prev method.

 $(function() { $("input.boundChild[type=checkbox]").click(function() { $(this).closest('ul').prev().prop("checked", this.checked); // $('input.boundParent').prop("checked", this.checked); }); }); 

http://jsfiddle.net/dhVvN/

Answer 2

to try:

 $(this).parent("li.expanded").find("input.boundParent").attr("checked","checked"); 

If the parent element li always has the expanded class when selecting the child element.