jquery - 如何使用 jQuery 检查所有复选框

Question

这个问题已经有答案了:

Select All checkboxes using jQuery (16 个回答)

已关闭 6 年前。

我正在尝试检查复选框输入类型的所有元素，我尝试了不同的解决方案，但它不起作用，我知道这很简单，但我不知道我的代码有什么问题:

<ul class="items">
  <li class="item checkall">
    <label>
      <input type="checkbox" name="item[]" id="checkAll">
      <span></span>
      <p>Check All Items</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="1">
      <span></span>
      <p>Learn HTML5.1</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="2">
      <span></span>
      <p>Learn PHP7</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="4">
      <span></span>
      <p>Program a Website</p>
    </label>
  </li>
</ul>

jQuery:

$(".checkall").click(function () {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

Answer 1

HTML 页面中每个元素的

id 必须是唯一的。因此，要么保留唯一id，要么为checkbox提供class，而不是id和class可以是一样的。 class 无需维护唯一性。

将click/change事件附加到.checkAll checkbox，此处已更改为class而不是id > 并根据.checkAll复选框的checked属性设置所有.checkbox属性。下面是片段。

$(".checkAll").on('change',function(){
  $(".checkbox").prop('checked',$(this).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
  <li class="item checkall">
    <label>
      <input type="checkbox" name="item[]" class="checkAll">
      <span></span>
      <p>Check All Items</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="1">
      <span></span>
      <p>Learn HTML5.1</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="2">
      <span></span>
      <p>Learn PHP7</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" class="checkbox" value="4">
      <span></span>
      <p>Program a Website</p>
    </label>
  </li>
</ul>