如果所有子复选框都被选中，则选中父复选框

Question

我正在尝试检查父节点是否已检查所有子节点。我也找到了关于该特定主题的一些解决方案。但是，可能是由于不同的嵌套级别而导致的。

到目前为止，我可以根据父节点检查/取消选中子节点。但是，反向操作不起作用，即检查是否已检查所有子节点的父节点。

我的HTML

<ul class="treeview">
   <li id="li_1" class="contains-items">
      <div class="checkbox">
         <input id="1" type="checkbox" value="1" name="categories[]">
         <label for="1">
         Floor
         </label>
      </div>
      <ul>
         <li class="li_1">
            <div class="checkbox">
               <input id="4" type="checkbox" value="4" name="categories[]">
               <label for="4">
               1st Floor
               </label>
            </div>
         </li>
         <li class="li_1">
            <div class="checkbox">
               <input id="5" type="checkbox" value="5" name="categories[]">
               <label for="5">
               2nd Floor
               </label>
            </div>
         </li>
         <li class="li_1">
            <div class="checkbox">
               <input id="6" type="checkbox" value="6" name="categories[]">
               <label for="6">
               3rd Floor
               </label>
            </div>
         </li>
      </ul>
   </li>
   <li id="li_2">
      <div class="checkbox">
         <input id="2" type="checkbox" value="2" name="categories[]">
         <label for="2">
         Rent
         </label>
      </div>
   </li>
   <li id="li_3" class="contains-items">
      <div class="checkbox">
         <input id="3" type="checkbox" value="3" name="categories[]">
         <label for="3">
         View
         </label>
      </div>
      <ul>
         <li class="li_3">
            <div class="checkbox">
               <input id="7" type="checkbox" value="7" name="categories[]">
               <label for="7">
               Pool View
               </label>
            </div>
         </li>
         <li class="li_3">
            <div class="checkbox">
               <input id="8" type="checkbox" value="8" name="categories[]">
               <label for="8">
               Mountain View
               </label>
            </div>
         </li>
         <li class="li_3">
            <div class="checkbox">
               <input id="9" type="checkbox" value="9" name="categories[]">
               <label for="9">
               Courtyard
               </label>
            </div>
         </li>
      </ul>
   </li>
</ul>

jQuery

 $('input[type=checkbox]').change(function(){
            // if is checked
            if($(this).is(':checked')){

                // check all children
                $(this).parent().siblings().find('li input[type=checkbox]').prop('checked', true);

                //if all siblings are checked, check its parent checkbox
                if($(this).parent().siblings('li input[type=checkbox]').is(":checked")) {  
                    console.log('all siblings checked');
                    //check its parent checkbox
                }else{
                    console.log('not all siblings checked');
                }

            } else {

                // uncheck all children
                $(this).parent().siblings().find('li input[type=checkbox]').prop('checked', false);

            }

        });

但是，即使这样做，即使所有内容都被选中，它也总是令人安慰not all sibilings checked。

Answer 1

为了简化操作，我删除了“ display：none;”。样式。

用于测试是否检查所有兄弟姐妹的方法是错误的。

更新的代码段：

$('input[type=checkbox]').change(function(){
    // if is checked
    if(this.checked){
        // check all children
        var lenchk = $(this).closest('ul').find(':checkbox');
        var lenchkChecked = $(this).closest('ul').find(':checkbox:checked');

        //if all siblings are checked, check its parent checkbox
        if (lenchk.length == lenchkChecked.length) {
            $(this).closest('ul').siblings().find(':checkbox').prop('checked', true);
        }else{
            $(this).closest('.checkbox').siblings().find(':checkbox').prop('checked', true);
        }
    } else {
        // uncheck all children
        $(this).closest('.checkbox').siblings().find(':checkbox').prop('checked', false);
        $(this).closest('ul').siblings().find(':checkbox').prop('checked', false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="treeview">
    <li id="li_1" class="contains-items">
        <div class="checkbox">
            <input id="1" type="checkbox" value="1" name="categories[]">
            <label for="1">
                Floor
            </label>
        </div>
        <ul >
            <li class="li_1">
                <div class="checkbox">
                    <input id="4" type="checkbox" value="4" name="categories[]">
                    <label for="4">
                        1st Floor
                    </label>
                </div>
            </li>
            <li class="li_1">
                <div class="checkbox">
                    <input id="5" type="checkbox" value="5" name="categories[]">
                    <label for="5">
                        2nd Floor
                    </label>
                </div>
            </li>
            <li class="li_1">
                <div class="checkbox">
                    <input id="6" type="checkbox" value="6" name="categories[]">
                    <label for="6">
                        3rd Floor
                    </label>
                </div>
            </li>
        </ul>
    </li>
    <li id="li_2">
        <div class="checkbox">
            <input id="2" type="checkbox" value="2" name="categories[]">
            <label for="2">
                Rent
            </label>
        </div>
    </li>
    <li id="li_3" class="contains-items">
        <div class="checkbox">
            <input id="3" type="checkbox" value="3" name="categories[]">
            <label for="3">
                View
            </label>
        </div>
        <ul>
            <li class="li_3">
                <div class="checkbox">
                    <input id="7" type="checkbox" value="7" name="categories[]">
                    <label for="7">
                        Pool View
                    </label>
                </div>
            </li>
            <li class="li_3">
                <div class="checkbox">
                    <input id="8" type="checkbox" value="8" name="categories[]">
                    <label for="8">
                        Mountain View
                    </label>
                </div>
            </li>
            <li class="li_3">
                <div class="checkbox">
                    <input id="9" type="checkbox" value="9" name="categories[]">
                    <label for="9">
                        Courtyard
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 2

将DBName status DB1 success DB1 Fail 添加到.branch元素中，该元素是复选框“兄弟姐妹”的父级，并且操作如下：

UL

$('.treeview').on('change', ':checkbox', function() {

  const $ul = $(this).closest('ul')

  if ($ul.is('.treeview')) { // Main checkbox handler: 
  
    const $group = $(this).closest('li').find(':checkbox');
    $group.prop('checked', this.checked);

  } else { // Group checkboxes handler:

    const $group  = $ul.find(':checkbox');
    $ul.closest('li').find(':checkbox:first').prop('checked', !$group.filter(':not(:checked)').length);
    
  }

});

注意：以上内容不是递归的，仅适用于单个深度。