在选中子复选框时选中父复选框

Question

我设法检查父复选框以检查所有子复选框，但我不知道如何检查任何子复选框以检查父复选框，如果所有子复选框都未选中，则父复选框需要被选中。 1.我检查了父复选框以检查所有子复选框（已完成）2.在检查任何子复选框时也检查了父复选框（未完成）3.如果所有子复选框都未选中，则父复选框也未选中（不完整）。 这是我走了多远：

 $(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> 

请帮我解决这个问题，因为我是jquery和js的新手。

Answer 1

您可以有另一个处理程序，该处理程序将检查是否选中了同一级别的任何复选框，如果是，请选中父复选框

 $(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

将一个parent类添加到父级li ，然后按如下所示进行操作。

 $("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>