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>

父对子复选框选择

1 个答案: