On check Child Checkbox checks Parent Checkbox

Question

I managed to do on checking Parent Checkbox to check all Child Checkboxes but i dont know how to do on checking any child checkbox to check the parent checkbox and if all the child checkboxes are unchecked then the Parent checkbox needs to be unchecked. 1. I did on checking Parent Checkbox to check all Child Checkboxes (completed) 2. on checking any child checkbox also checks parent checkbox (not complete) 3. if all the child checkboxes are unchecked then the Parent checkbox unchecks(not complete). This is how far i got:

 $(function () { $("input[type='checkbox']").change(function () { $(this).siblings('ul') .find("input[type='checkbox']") .prop('checked', this.checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <li style="display: block;"><input type="checkbox">Lead1 <br> <ul> <li style="display: block;"><input type="checkbox"> All Leads <br></li> <li style="display: block;"><input type="checkbox"> Recent Leads <br></li> <li style="display: block;"><input type="checkbox"> My Leads <br></li> </ul> </li> <li style="display: block;"><input type="checkbox">Lead2 <br> <ul> <li style="display: block;"><input type="checkbox"> first <br></li> <li style="display: block;"><input type="checkbox"> second <br></li> <li style="display: block;"><input type="checkbox"> third <br></li> </ul> </li> 

Please Help me to solve this as i am new to jquery and js.

Answer 1

You can have another handler which will check whether any checkbox in the same level is checked if so check the parent checkbox

 $(function() { $("li:has(li) > input[type='checkbox']").change(function() { $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked); }); $("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() { $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li style="display: block;"> <input type="checkbox">Lead1 <br> <ul> <li style="display: block;"> <input type="checkbox">All Leads <br> </li> <li style="display: block;"> <input type="checkbox">Recent Leads <br> </li> <li style="display: block;"> <input type="checkbox">My Leads <br> </li> </ul> </li> <li style="display: block;"> <input type="checkbox">Lead2 <br> <ul> <li style="display: block;"> <input type="checkbox">first <br> </li> <li style="display: block;"> <input type="checkbox">second <br> </li> <li style="display: block;"> <input type="checkbox">third <br> </li> </ul> </li> </ul> 

Answer 2

Add a class parent to the parent li and then do it like following.

 $("input[type='checkbox']").change(function () { var ul = $(this).closest('ul'); var checked = ul.find('input[type="checkbox"]:checked').length > 0; $(this).closest('.parent').find('input[type="checkbox"]').first().prop('checked', checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="parent" style="display: block;"> <input type="checkbox">Lead1 <br> <ul> <li style="display: block;"><input type="checkbox"> All Leads <br></li> <li style="display: block;"><input type="checkbox"> Recent Leads <br></li> <li style="display: block;"><input type="checkbox"> My Leads <br></li> </ul> </li> <li class="parent" style="display: block;"> <input type="checkbox">Lead2 <br> <ul> <li style="display: block;"><input type="checkbox"> first <br></li> <li style="display: block;"><input type="checkbox"> second <br></li> <li style="display: block;"><input type="checkbox"> third <br></li> </ul> </li>