Question

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

Answer 1

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

Answer 2

人们似乎对如何在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;
    }
}

<强>更新

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

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

Answer 3

redquare会有什么效果，但总体来说使用true / false更好，因为这是他们的标准化方式，以下是为什么会这样做的几个例子是一个方便的习惯。例如：

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

You can test this here

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

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

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

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

现在我们必须带来一个新功能来完成工作.removeAttr()。公平地说，this is even how the jQuery documentation does it in the example。但是，如果你利用jQuery在内部实现的规范化，你可以大大减少这一点，如下所示：

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

在编码时，请注意这一点，同样的规则适用于.attr('disabled')。还有其他区域也会发生规范化......可能事件是其中最广泛的事件，如果你好奇you can see that here，它已经为你完成了，使用它：）

Answer 4

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

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

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

参见示例：

JS FIDDLE

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

4 个答案: