jquery - 许多复选框组和 "select all"

Question

我有 8 组复选框。每个组都有一个“主”和 8 到 12 个子复选框，并尝试为每个组创建“取消/全选”行为。

我发现了这个 https://stackoverflow.com/a/25697142/9098325但它只显示一组复选框。

我在这里摆弄了我不起作用的解决方案:https://jsfiddle.net/ex4rnq83/

$('.outer').on('click', function() {
  if (this.checked) {
    $('.inner').each(function() {
      this.checked = true;
    });
  } else {
    $('.inner').each(function() {
      this.checked = false;
    });
  }
});

$('.inner').on('click', function() {
  if ($(this).is(":checked")) {
    var isAllChecked = 0;

    $(".inner").each(function() {
      if (!this.checked)
        isAllChecked = 1;
    });

    if (isAllChecked == 0) {
      $(".outer").prop("checked", true);
    }
  } else {
    $(".outer").prop("checked", false);
  }
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="out1" class="outer">
    <label for="out1">Checkbox Out 1</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner1" class="inner">
      <label for="out1">Checkbox Inner 1</label>
    </li>
    <li>
      <input type="checkbox" id="inner2" class="inner">
      <label for="out1">Checkbox Inner 2</label>
    </li>
    <li>
      <input type="checkbox" id="inner3" class="inner">
      <label for="out1">Checkbox Inner 3</label>
    </li>
  </ul>
  <li>
    <input type="checkbox" id="out2" class="outer">
    <label for="out1">Checkbox Out 2</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner4" class="inner">
      <label for="out1">Checkbox Inner 4</label>
    </li>
    <li>
      <input type="checkbox" id="inner5" class="inner">
      <label for="out1">Checkbox Inner 5</label>
    </li>
  </ul>
</ul>

Answer 1

首先，如果您更正 HTML，使子级 ul 位于父级的 li 内，那么这会变得简单得多。选中复选框后，您可以轻松遍历 DOM 以查找子复选框并将其选中状态设置为匹配。

类似地，您可以获得同级复选框的选中状态。如果它们全部被选中，那么任何父复选框都应该被选中。像这样的事情:

$(':checkbox').on('change', function() {
  // check children
  $(this).closest('li').find(':checkbox').prop('checked', this.checked);

  // check parent if all children checked
  var $ul = $(this).closest('ul');
  var $siblings = $ul.find('> li > label > :checkbox');
  var allChecked = $siblings.length == $siblings.filter(':checked').length;
  $ul.closest('li').find('> label > :checkbox').prop('checked', allChecked);
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <label><input type="checkbox">Checkbox Out 1</label>
    <ul>
      <li>
        <label><input type="checkbox">Checkbox Inner 1</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 2</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 3</label>
      </li>
    </ul>
  </li>
  <li>
    <label><input type="checkbox">Checkbox Out 2</label>
    <ul>
      <li>
        <label><input type="checkbox">Checkbox Inner 4</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 5</label>
      </li>
    </ul>
  </li>
</ul>

请注意，这完全不需要任何唯一的 id 属性，因为逻辑依赖于 DOM 结构，并且 label 元素已被移动以包装它们所在的复选框相关。 inner 和 outer 类属性也已被删除，因为它们在正确嵌套 ul/li 时变得多余。