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

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

尝试更改事件

演示

$('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