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

Check all checkboxes on page load with jQuery

提问by sevens

On page load, using jQuery how can I select all check boxes in a specific div automatically?

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

回答by redsquare

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

回答by Tim Down

People seem genuinely confused about how to do this in jQuery. Checking a checkbox is much easier and more efficient without it. The following uses jQuery's strengths of selecting and iterating over a list of nodes combined with the couldn't-be-simpler DOM checkedproperty of checkbox elements:

人们似乎真的对如何在 jQuery 中做到这一点感到困惑。没有它，检查复选框会更容易、更有效。以下使用 jQuery 选择和迭代节点列表的优势，结合checkedcheckbox 元素的简单 DOM属性：

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

It's not too hard to cut out jQuery altogether in this case:

在这种情况下，完全删除 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

更新

Since the release of jQuery 1.6 and prop(), there is a sane way to do this in jQuery:

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

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

回答by Nick Craver

What redquarehas will work, but it's a better idea overall to use true/falsewith these since that's how they're normalized, here are a few examples of why this is a handy habit to follow. For example:

redquare有什么会起作用，但总体上使用true/false与这些一起使用是一个更好的主意，因为这就是它们的标准化方式，这里有几个例子说明为什么这是一个方便的习惯。例如：

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

You can test this here

你可以在这里测试

Instead, get in the habit of passing a boolean, which is a lot more versatile, for example:

相反，养成传递布尔值的习惯，它的用途要广泛得多，例如：

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

This allows a lot more flexibility in more terse code, for example, say we had a "Check All" checkbox on the top, how would that look?

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

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

Now we've had to bring a new function in to do the work, .removeAttr(). To be fair, this is even how the jQuery documentation does it in the example. But, you can cut that down greatly if you take advantage of the normalization jQuery does internally, like this:

现在我们不得不引入一个新函数来完成这项工作，.removeAttr(). 公平地说，这甚至是 jQuery 文档在示例中的做法。但是，如果您利用 jQuery 在内部进行的规范化，您可以大大减少它，如下所示：

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

---

---

This is just something to keep in mind as you code, the same rules appy to .attr('disabled'). There are other areas that normalization occurs as well...probably events being the most extensive of them, if you're curious you can see that here, it's already done for you, use it :)

这只是您在编码时要记住的事情，同样的规则适用于.attr('disabled'). 还有其他领域也发生了规范化......可能事件是其中最广泛的，如果你很好奇，你可以在这里看到，它已经为你完成了，使用它:)

回答by Ari

This is work in firefox v.17.01. Not yet tested it on another browsers.

这是在 Firefox v.17.01 中的工作。尚未在其他浏览器上对其进行测试。

// Select and Check checkboxes on load

// 在加载时选择并检查复选框

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

See the example:

看例子：

JS FIDDLE

JS小提琴