使用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