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
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.