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

javascript jquery checkbox

2022-08-30 02:27:05

我不是jQuery的专家，但我试图为我的应用程序创建一个小脚本。我想选中所有复选框，但它无法正常工作。

首先，我尝试使用，之后我尝试了，但我做错了什么。attrprop

我先试了一下：

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

但这并没有奏效。

下一篇：这比上面的代码效果更好

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

这两个示例都不起作用。

JSFiddle： http://jsfiddle.net/hhZfu/4/

答案 1

您需要使用 .prop（）来设置选中的属性

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

演示：小提琴

答案 2

只需使用的属性，并使用 prop（） 而不是 attr 来检查属性checkedcheckAll

现场演示

 $('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
 });

使用 prop（）而不是 attr（）来表示像 checked 这样的属性

从 jQuery 1.6 开始，.attr（）方法返回未定义的属性，用于尚未设置的属性。若要检索和更改 DOM 属性（如表单元素的已检查、选中或禁用状态），请使用 .prop（）方法

复选框具有相同的 ID，并且它应是唯一的。最好将某些类与依赖复选框一起使用，以便它不包含不需要的复选框。将选择页面上的所有复选框。如果您的页面使用新复选框进行扩展，则它们也将被选中/取消选中。这可能不是预期的行为。$('input:checkbox')

现场演示

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});