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

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