父对子复选框选择

Question

我正在尝试通过复选框设置和父级选择子级，如果已选择子级元素，则父级有不确定的（减号）。

HTML结构

    <ul>
      <li>
        <label for="redskins">
        <input type="checkbox" name="redskins" id="redskins">
        Redskins</label>

        <ul>
          <li>     <label for="cheifs">
            <input type="checkbox" name="cheifs" id="cheifs">
            <label for="cheifs">Cheifs</label>
          </li>
          <li>
            <label for="vikings"><input type="checkbox" name="vikings" id="vikings">
            Vikings</label>


          </li>
          <li>
             <label for="jets"><input type="checkbox" name="jets" id="jets">
           Jets</label>
          </li>
        </ul>
      </li>
      <li>
        <label for="packers">
        <input type="checkbox" name="packers" id="packers">
        Packers</label>

        <ul>
          <li>     <label for="chargers">
            <input type="checkbox" name="chargers" id="chargers">
            <label for="chargers">Chargers</label>
          </li>
          <li>
            <label for="giants"><input type="checkbox" name="giants" id="giants">
            Giants</label>


          </li>
          <li>
             <label for="jets"><input type="checkbox" name="jets" id="jets">
           Jets</label>
          </li>
        </ul>
      </li>
        </ul>
      </li>
    </ul>

Javascript（jQuery）

      $('input[type="checkbox"]').change(function(e) {

      var checked = $(this).prop("checked"),
      container = $(this).parent(),
      siblings = container.siblings();

      container.find('input[type="checkbox"]').prop({
       indeterminate: false,
       checked: checked
    });

    function checkSiblings(el) {

    var parent = el.parent().parent(),
        all = true;
  console.log(parent);
    el.siblings().each(function() {
      console.log($(this))
      let returnValue = all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
      return returnValue;
    });

    if (all && checked) {
      console.log(parent.children('input[type="checkbox"]'));
      parent.children('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
      });
console.log(parent);
      checkSiblings(parent);

    } else if (all && !checked) {

      parent.children('input[type="checkbox"]').prop("checked", checked);
      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
      console.log(parent);
      checkSiblings(parent);

    } else {

      el.parents("li").children('input[type="checkbox"]').prop({
        indeterminate: true,
        checked: false
      });

    }

  }

  checkSiblings(container);
});

https://codepen.io/kkashou/pen/KKPZORP

这是我目前设置的代码。

让我知道我在做什么错。

谢谢

Answer 1

您的解决方案看起来太复杂了，这是一个简单的版本，

您需要首先确定父或子复选框是否已更改，然后分别将结果传递给有关各方。

 $('input[type=checkbox]').change(function (e) { var checked = $(this).prop('checked'); var isParent = !!$(this).closest('li').find(' > ul').length; if (isParent) { // if a parent level checkbox is changed, locate all children var children = $(this).closest('li').find('ul input[type=checkbox]'); children.prop({ checked }); // all children will have what parent has } else { // if a child checkbox is changed, locate parent and all children var parent = $(this).closest('ul').closest('li').find('>label input[type=checkbox]'); var children = $(this).closest('ul').find('input[type=checkbox]'); if (children.filter(':checked').length === 0) { // if all children are unchecked parent.prop({ checked: false, indeterminate: false }); } else if (children.length === children.filter(':checked').length) { // if all children are checked parent.prop({ checked: true, indeterminate: false }); } else { // if some of the children are checked parent.prop({ checked: true, indeterminate: true }); } } }); 

 ul { list-style: none; margin: 5px 20px; } li { margin: 10px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <label for="redskins"> <input type="checkbox" name="redskins" id="redskins"> Redskins</label> <ul> <li> <label for="cheifs"> <input type="checkbox" name="cheifs" id="cheifs"> <label for="cheifs">Cheifs</label> </li> <li> <label for="vikings"><input type="checkbox" name="vikings" id="vikings"> Vikings</label> </li> <li> <label for="bears"><input type="checkbox" name="bears" id="bears"> Bears</label> </li> </ul> </li> <li> <label for="packers"> <input type="checkbox" name="packers" id="packers"> Packers</label> <ul> <li> <label for="chargers"> <input type="checkbox" name="chargers" id="chargers"> <label for="chargers">Chargers</label> </li> <li> <label for="giants"><input type="checkbox" name="giants" id="giants"> Giants</label> </li> <li> <label for="jets"><input type="checkbox" name="jets" id="jets"> Jets</label> </li> </ul> </li> </ul>