使用jQuery检查页面加载的所有复选框

在页面加载时,使用jQuery如何自动选择特定div中的所有复选框?

$(function(){ $('#thediv input:checkbox').attr('checked', 'checked'); }); 

人们似乎对如何在jQuery中执行此操作感到困惑。 没有它,选中复选框会更容易,更有效。 以下使用jQuery的优势来选择和迭代节点列表,并结合复选框元素的无法更简单的DOM checked属性:

 $("#myDiv input:checkbox").each(function() { this.checked = true; }); 

在这种情况下完全删除jQuery并不太难:

 var div = document.getElementById("myDiv"); var inputs = div.getElementsByTagName("input"); for (var i = 0, len = inputs.length; i < len; ++i) { if (inputs[i].type == "checkbox") { inputs[i].checked = true; } } 

UPDATE

自从jQuery 1.6和prop()发布以来,在jQuery中有一种理智的方法:

 $("#myDiv input:checkbox").prop("checked", true); 

redquare有什么用 ,但是总体来说使用true / false是更好的主意,因为这是他们的标准化,这里有几个例子说明为什么这是一个方便的习惯。 例如:

 $('#myDiv :checkbox').attr('checked', 'checked'); alert($('#myDiv :checkbox').attr('checked')); //this alerts true, not "checked" 

你可以在这里测试一下

相反,养成传递布尔值的习惯,布尔值更通用,例如:

 $(function() { $('#myDiv :checkbox').attr('checked', true); }); 

这样可以在更简洁的代码中提供更大的灵活性,例如,我们在顶部有一个“全部检查”复选框,看起来如何?

 $('#checkAll').change(function() { if(this.checked) { $('#subTable :checkbox').attr('checked', 'checked'); } else { $('#subTable :checkbox').removeAttr('checked', 'checked'); } }); 

现在我们必须带一个新函数来完成工作, .removeAttr() 。 公平地说, 这甚至是jQuery文档在示例中的用法 。 但是,如果你利用jQuery在内部执行的规范化,你可以大大减少这一点,如下所示:

 $('#checkAll').change(function() { $('#subTable :checkbox').attr('checked', this.checked); }); 

在编写代码时,请注意这一点,相同的规则应用于.attr('disabled') 。 还有其他区域也会发生规范化……可能事件是其中最广泛的事件,如果你很好奇, 你可以在这里看到 ,它已经为你完成了,使用它:)

这是在firefox v.17.01中的工作。 尚未在其他浏览器上测试过它。

//加载时选择并选中复选框

 $('#enable, #enable1, #enable2, #enable3').attr('checked', 'checked'); 

看例子:

JS FIDDLE