如果取消选中所有子复选框，如何取消选中父复选框，反之亦然？

Question

如果所有子复选框都被选中，如何检查父复选框，反之亦然？ 我正在使用列表中的 div 执行此操作，因为我使用的模板要求该类用于复选框。 我使用了父函数。 它的第三级我遇到了问题。 是因为我使用的 div 吗？ 如果选中至少一个孩子，还想检查父复选框，请帮忙。

 $('input[type=checkbox]').click(function() { if (this.checked) { $(this).parents().parents().children('input[type=checkbox]').prop('checked', true); $(this).parent().parent().parent().parent().children('div').first('div').children('input[type=checkbox]').attr('checked', true); } $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="col-sm-offset-2 col-sm-10"> <ul class="list-unstyled"> <li> <div class="checkbox"> <input id="1" type="checkbox" class="checkbox"> <label for="1">Dashboard</label> </div> </li> <li class="has_sub"> <div class="checkbox"> <input id="4" type="checkbox" class="parent"> <label for="4">Customer</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="4.11" type="checkbox" class="child1Gen"> <label for="4.11">Customer List</label> </div> </li> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="4.12" type="checkbox" class="child1Gen"> <label for="4.12">Add Customer</label> </div> </li> </ul> </li> <li class="has_sub"> <div class="checkbox"> <input id="5" type="checkbox" class="parent"> <label for="5">Example</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="5.1" type="checkbox" class="child1Gen"> <label for="5.1">Example1</label> </div> </li> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="5.4" type="checkbox" class="child1Gen"> <label for="5.4">Example2</label> </div> </li> <li class="has_sub"> <div class="checkbox" style="margin-left: 25px;"> <input id="5.5" type="checkbox" class="child1Gen"> <label for="5.5">Example3</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.1" type="checkbox" class="child2Gen"> <label for="5.5.1">Example3Sub1</label> </div> </li> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.2" type="checkbox" class="child2Gen"> <label for="5.5.2">Example3Sub2</label> </div> </li> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.3" type="checkbox" class="child2Gen"> <label for="5.5.3">Example3Sub3</label> </div> </li> </ul> </li> </ul> </li> </ul> </div>

Answer 1

尝试change事件

演示

 $('input[type=checkbox]').change(function() { // For child cb let $this = $(this) $this.parents('li:first').find('ul input[type=checkbox]').prop('checked', this.checked) // For parent cb let $siblings = $this.parents('ul:first').children('li') let $checked = $siblings.find('input[type=checkbox]:checked') let $checkbox = $siblings.find('input[type=checkbox]') $this.parents('ul:first').siblings('div.checkbox').find('input[type=checkbox]').prop('checked', $checked.length === $checkbox.length) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="col-sm-offset-2 col-sm-10"> <ul class="list-unstyled"> <li> <div class="checkbox"> <input id="1" type="checkbox" class="checkbox"> <label for="1">Dashboard</label> </div> </li> <li class="has_sub"> <div class="checkbox"> <input id="4" type="checkbox" class="parent"> <label for="4">Customer</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="4.11" type="checkbox" class="child1Gen"> <label for="4.11">Customer List</label> </div> </li> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="4.12" type="checkbox" class="child1Gen"> <label for="4.12">Add Customer</label> </div> </li> </ul> </li> <li class="has_sub"> <div class="checkbox"> <input id="5" type="checkbox" class="parent"> <label for="5">Example</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="5.1" type="checkbox" class="child1Gen"> <label for="5.1">Example1</label> </div> </li> <li> <div class="checkbox" style="margin-left: 25px;"> <input id="5.4" type="checkbox" class="child1Gen"> <label for="5.4">Example2</label> </div> </li> <li class="has_sub"> <div class="checkbox" style="margin-left: 25px;"> <input id="5.5" type="checkbox" class="child1Gen"> <label for="5.5">Example3</label> </div> <ul class="list-unstyled"> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.1" type="checkbox" class="child2Gen"> <label for="5.5.1">Example3Sub1</label> </div> </li> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.2" type="checkbox" class="child2Gen"> <label for="5.5.2">Example3Sub2</label> </div> </li> <li> <div class="checkbox" style="margin-left: 50px;"> <input id="5.5.3" type="checkbox" class="child2Gen"> <label for="5.5.3">Example3Sub3</label> </div> </li> </ul> </li> </ul> </li> </ul> </div>

对于中级复选框

https://stackoverflow.com/a/56600257/8053274