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

【问题标题】：Check all checkboxes on page load with jQuery使用 jQuery 检查页面加载时的所有复选框
【发布时间】：2011-03-08 18:59:21
【问题描述】：

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

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

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

【讨论】：

【解决方案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);

【讨论】：

我知道这个很旧，但也许你可以帮帮我。我有一个表单，我喜欢在其中预先选择 div 中的所有复选框，但是在提交表单后它应该显示选中的框（用户可能会取消选择一个框，现在所有框都被再次选中），请注意

【解决方案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，它已经为你完成了，使用它:)

【讨论】：

我知道我在这方面的记录很糟糕，但实际上，复选框元素的checked 属性是迄今为止最简单、最自然的使用方式。 disabled 也是如此。
@Tim - 什么是正在使用的 :) 然而 setting 在 multiple 元素上的属性并不容易以简洁的方式完成，为此，您必须在所有代码中手动调用.each()。你可以在 collection 上做.checked = true; :)
我知道，我知道。我在回答中这样做了。我仍然更愿意推荐使用each() 和checked 属性：由于不幸命名为attr() 函数（通常设置属性，而不是属性），许多开发人员现在对一些极其简单的事情存在不必要的混淆) 以及人们现在推荐的多种不确定和曲折的方式来设置一个简单的布尔标志，该标志已经存在并愉快地工作了 15 年。
@Tim - 我明白你的意思，但归根结底，jQuery is doing elem['checked'] = true; 在上面的方法中。是的，有一些开销，归结为一个偏好问题，我想......在任何一种情况下，这都是一个非常小的时间/CPU成本，我个人会在这些情况下采取更简洁的方法。如果由于某种原因我有足够的复选框来处理它......并且我认为此时存在表单问题，那么我会选择.each() 方法:)
很公平。您知道自己在做什么，因此可以做出深思熟虑的选择。我试图为可能不是的开发人员简化事情。我反对在这里使用attr() 与其说是与性能有关，不如说是使用适当的工具来完成这项工作。 jQuery 几乎单枪匹马负责的属性/属性混淆是不必要且烦人的。它延续了 DOM 很难，因此我们都应该使用 jQuery 的神话，而事实是，在这种情况下，jQuery 本身使一项简单的任务变得更加困难。

【解决方案4】：

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

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

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

看例子：

JS FIDDLE

【讨论】：