如何使用 jQuery 检查所有复选框 [重复]答案

【问题标题】：How to check all Checkboxes using jQuery [duplicate]如何使用 jQuery 检查所有复选框 [重复]
【发布时间】：2017-06-27 11:20:50
【问题描述】：

如果复选框输入类型，我正在尝试检查所有元素，我尝试了不同的解决方案但没有奏效，我知道这很简单，但我不知道我的代码有什么问题：

<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);
});

【问题讨论】：

首先使用class而不是id。 id 必须是唯一的，使用#id 选择一个id，使用.class 选择一个类。如果你看起来更好，还有很多像你一样的问题stackoverflow.com/questions/18537609/jquery-checkbox-check-all； stackoverflow.com/questions/15504643/…
是的。这很简单。所以，我的问题是：如果要检查所有复选框，为什么需要not(this) 语句？
使用change 事件而不是click
@Alexis 我一直在寻找不同的问题，但我无法做到。
希望对您有所帮助！ fiddle

标签： jquery checkbox

【解决方案1】：

id 页面中的每个元素的HTML 必须是唯一的。因此，要么保留unique id，要么为checkbox 提供class 而不是id，class 可以相同。使用class 无需维护唯一性。

将click/change event 附加到.checkAll checkbox，此处已更改为类而不是id，并根据.checkAll 复选框的选中属性设置所有.checkbox 属性。下面是sn-p。

$(".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>

【讨论】：

【解决方案2】：

把你的js改成这样：

$(".checkall").click(function (e) {
  $('input[type="checkbox"]').not(this).prop('checked', this.checked);
});

并将类添加到您的输入中，而不是 li 元素：

<input class="checkall" type="checkbox" name="item[]" id="checkAll">

这里是fiddle

【讨论】：

【解决方案3】：

$(".checkall").click(function (e) {

  var list = $(e.target).parents('ul');
  $('li:gt(0) label input:checkbox',list).attr('checked', this.checked);

});

【讨论】：

虽然这段代码 sn-p 可以解决问题，包括说明如何和 为什么 这解决了问题 would really help 以改进你的帖子质量。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人！请edit您的答案添加解释，并说明适用的限制和假设。
@TobySpeight 好的，下次我会处理这些事情的。