Check parent checkboxes in nested ul li – jQuery

Sometimes in jQuery we need to select all checkbox that are child of a element or depends on child checkbox we need to select top most parent checkbox.

You need to iterate all children for which the parent you click in and the same way for a child we need to check top most parent.

Here is sample HTML :

<ul class="nested" id="nested">
<li>
<input type="checkbox" name="" value="1"> One
<ul>
<li><input type="checkbox" name="" value="1">Child 1 of One </li>
<li><input type="checkbox" name="" value="1">Child 2 of One</li>
<li><input type="checkbox" name="" value="1">Child 3 of One
<ul>
<li><input type="checkbox" name="" value="1">Child 1 of Child 3 of One</li>
<li><input type="checkbox" name="" value="1">Child 2 of Child 3 of One</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="" value="1"> Two</li>
<li><input type="checkbox" name="" value="1"> Three
<ul>
<li>
<input type="checkbox" name="" value="1">
Child 1 of Three </li>
<li><input type="checkbox" name="" value="1">Child 2 of Three
<ul>
<li><input type="checkbox" name="" value="1">Child 1 of Child 2 of Three</li>
<li><input type="checkbox" name="" value="1">Child 2 of Child 2 of Three</li>
</ul>
</li>
</ul>
</li>
</ul>

Here is sample jQuery :

$('.nested input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});

View :

• One
  • Child 1 of One
  • Child 2 of One
  • Child 3 of One
    • Child 1 of Child 3 of One
    • Child 2 of Child 3 of One
• Two
• Three
  • Child 1 of Three
  • Child 2 of Three
    • Child 1 of Child 2 of Three
    • Child 2 of Child 2 of Three

Check jsFiddle Example