选中所有 HTML 复选框答案

【问题标题】：Select all HTML checkboxes选中所有 HTML 复选框
【发布时间】：2009-02-14 00:34:13
【问题描述】：

我有一个小复选框列表（见下文），我注意到我可以使用 type="reset" 的输入元素，它会取消选中所有框。我知道使用输入会比链接的“onClick”事件更好，因为我不会依赖 JavaScript，但对于这个例子，我两者都有。

<a onclick="javascript:document.myList.reset();" href="#">select none</a>  |
<a href="#">select all</a>
<form name="myList">
  <input type="checkbox" name="item1"/>Item 1<br/>
  <input type="checkbox" name="item2"/>Item 2<br/>
  <input type="reset" name="none"/>
  <input type="submit" name="submit"/>
</form>

实施“全选”的最佳方式是什么？我可能需要编写一个 JavaScript 函数，该函数使用 type="checkbox" 遍历表单“myList”的所有“输入”元素，并将值设置为“0”或其他值。另外，这样做的正确“跨浏览器”方式是什么？

我认为没有像重置一样的 HTML 表单方式吗？（我找不到。）

【问题讨论】：

澄清一下，HTML 重置会将一切改回原来的样子。如果您的复选框在渲染时被选中，重置按钮将使其选中。

标签： javascript html forms

【解决方案1】：

重置会将其设置为初始状态。这意味着，如果您之前将所有复选框都设置为选中，然后更改，按下重置将使它们恢复到该状态。

我建议使用 jQuery 来一次更改多个元素：

$("form[name='myList'] :checkbox").attr("checked", true);

或使用纯 JavaScript：

for(var i in document.myList.childNodes)
    if(document.myList.childNodes[i].type == "checkbox")
        document.myList.childNodes[i].checked = true;

【讨论】：

【解决方案2】：

是的，你会使用 JS。

for(var ix = 0; ix < document.myList.elements.count; ix++)
    if(document.myList.elements[ix].type == 'checkbox')
        document.myList.elements[ix].checked = true;

【讨论】：

我认为是 .checked = true;
谢谢，这很简单。我将其缩短并内联（可能会在以后将其拉出），并在 IE 和 Firefox 中对其进行了测试。最终产品：全选

【解决方案3】：

正确，没有 HTML 方式。您必须使用 JavaScript 或其他语言来实现它。

【讨论】：

【解决方案4】：

你也可以使用jquery函数.each

【讨论】：