jquery - 如何通过按钮选择所有复选框

Question

我想在 jquery 事件按钮单击时选择所有输入复选框字段但是当我单击按钮时没有任何反应

查询

$('#selAll').on('click', function() {
   $(".cb").attr('checked', $(this).is(":checked"));
});

HTML

    <input type="button" value="Select All" class="btn" id="selAll" />
    <input type="checkbox" name="a" value="1" class="cb">
    <input type="checkbox" name="b" value="1" class="cb">

哪个是最好/正确的解决方案？感谢 JsFiddle 示例

Answer 1

要选中一个复选框，您应该使用prop()方法，如下所示：

$('.cb').prop('checked', true);

编辑： 这是从 jQuery API 文档中推荐的。我看到您想要切换，可以通过以下方式完成：

$('.cb').prop('checked', function(i, val) {return !val;}); 

EDIT2： 如果您想通过一个按钮打开/关闭所有复选框，则必须保留某种记录来告诉脚本打开或关闭。最简单的方法是更改​​按钮的标题，并以这种方式执行条件。但这是你的选择。例子：

$('#button').on('click', function(){
  // Change values
  $('.cb').prop('checked', ($(this).val() == 'Check'));
  // Change caption of this button
  $(this).val( ($(this).val() == 'Check' ? 'Uncheck' : 'Check') );
});
// HTML
<input type="button" id="button" value="Check" />

当然，如果您只想要一个“全选”按钮，我的第一个代码示例就适用。

Answer 2

  $('#selAll').on('click', function() {
    $(".cb").attr('checked', "checked");
  });

甚至.attr()也可以工作，但正如评论部分所建议的那样，推荐的功能是.prop()

$('.cb').prop('checked', true);

http://api.jquery.com/prop/

Answer 3

我总是使用字符串设置选中的属性“checked”，不确定这是否是最好的方法，但它适用于我的情况。

为了让你让它工作：

改变 $(".cb").attr('checked', $(this).is(":checked"));

至

$("input.cb").attr('checked', "checked");

那应该工作！

Answer 4

!在前面使用$(this).is(":checked")：

$('#selAll').on('click', function () {
    $(".cb").attr('checked', !$(this).is(":checked"));
});

Answer 5

函数全选（）{

$('.selectedId').attr('checked', isChecked('selectall'));

}

功能 isChecked(checkboxId) {

var id = '#' + checkboxId;

return $(id).is(":checked");

}