4

I have a treelist containing multiple levels of checkboxes and I am trying to get the parent checkbox to show as 'checked' when any of children checkboxes are clicked. For some reason this is not working and it's killing 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>
Usman
  • 3,200
  • 3
  • 28
  • 47
silvster27
  • 1,916
  • 6
  • 30
  • 44

2 Answers2

9

input elements can't have children, in your markup input.boundParent is not one of the parents of the input.boundChild. It's a sibling of the ul element. you can use 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/

Ram
  • 143,282
  • 16
  • 168
  • 197
  • Ya, great explanation. Although, you should preferably use parents() as closest() will include node itself which is useless in this sample. – A. Wolff Oct 17 '12 at 12:59
0

try:

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

Provided the parent li always has the expanded class when you select a child.