Question

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

<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

id对于HTML页面中的每个元素都必须是唯一的。因此，保留unique id或class代替checkbox代替id和class可以相同。使用class维护没有独特性。

将click/change event附加到.checkAll checkbox已更改为此处的课程而不是id，并根据已检查的属性设置所有.checkbox属性.checkAll复选框。以下是摘录。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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

Answer 3

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

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

});

如何使用jQuery检查所有Checkbox

3 个答案: