使用 jquery 选中和取消选中所有复选框答案

【问题标题】：Check and uncheck all checkboxes with jquery使用 jquery 选中和取消选中所有复选框
【发布时间】：2017-04-22 06:47:01
【问题描述】：

我正在使用此脚本来检查和取消选中所有复选框：

$('#checkall').click(function () {
    var checked = $(this).data('checked');
    $('.chkall').find(':checkbox').attr('checked', !checked);
    $(this).data('checked', !checked);
});

效果很好，但是一旦我在“全选”之后取消选中几个选中的复选框，然后再次点击“取消选中所有”和“全选”，那些以前未选中的复选框就不会再次被选中。帮助会很棒！非常感谢！

【问题讨论】：

使用.prop() 而不是.attr()
为什么要在checkall 元素上设置data？为什么它本身不是一个复选框
checkall 是 CheckBox 还是其他控件？
请问你的html？

标签： javascript jquery checkbox

【解决方案1】：

这可能是正确的方法..

使用 prop 而不是 attr 并将复选框列表分组到一个 div 中，仅用于组织目的。也照原样使用checked，不要否定它。

$(document).ready(function() {
  $('#checkall').click(function() {
    var checked = $(this).prop('checked');
    $('#checkboxes').find('input:checkbox').prop('checked', checked);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />

</div>

【讨论】：

嗯。不过有点小问题。当我全部取消选中时，所有复选框值仍会传输到my link，就好像它们被选中一样？

【解决方案2】：

$('#checkall').click(function(){
    var d = $(this).data(); // access the data object of the button
    $(':checkbox').prop('checked', !d.checked); // set all checkboxes 'checked' property using '.prop()'
    d.checked = !d.checked; // set the new 'checked' opposite value to the button's data object
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='checkall' data-checked='false'>check/uncheck all</button>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>

我猜到了您的 HTML 是什么样子的，就触发按钮而言，但我不知道您最初是如何在其上设置 data 的。希望这是你编码的方式。如果没有，请告诉。

【讨论】：

@Satpal - 是的，data.checked。有什么问题？不知道自己在做什么，我没有 27k 积分。
现在您已经编辑了，所以现在您知道出了什么问题。对于拥有 27k 点的人来说，答案很糟糕
@Satpal - 我正在写一个答案，但我在打字的时候忘记了更改。杀我。请解释为什么您认为这是一个糟糕的答案。它完美无缺
代码转储对新手没有用。我投反对票是有原因的，编辑并解释您所做的更改。我的投票会改变
我忘了在底部的作业中添加.checked。我添加了关于 OP 的 HTML 外观的假设，因为他没有说

【解决方案3】：

您只需要获取所有复选框并全部选中即可。

$('#checkall').click(function() {

  var _this = this;
  $('#checkboxes').find('input[name="checkAll"]').each(function() {
   
    if ($(_this).is(':checked')) {
      $(this).prop('checked', true);
    } else {
      $(this).prop('checked', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes" class=".chkall">
  <input type="checkbox" name="checkAll"/>
  <input type="checkbox" name="checkAll"/>
  <input type="checkbox" name="checkAll" />
  <input type="checkbox" name="checkAll" />
  <input type="checkbox" name="checkAll" />
  <input type="checkbox" name="checkAll" />
  <input type="checkbox" name="checkAll" />

</div>

【讨论】：