Check parent checkboxes in nested ul li – jQuery

jQuery scroll to element

Sometimes 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

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

You may like:  Steps to take when jQuery is not working

Leave a Reply

Your email address will not be published. Required fields are marked *