Question

我有一个小的复选框列表（见下文），我注意到我可以使用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函数，它循环遍历“myList”形式的所有“input”元素，其中type =“checkbox”并将值设置为“0”或其他内容。另外，正确的“跨浏览器”方式是什么？

我假设没有HTML格式的方式像重置一样这样做？（我找不到一个。）

Answer 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;

Answer 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;

Answer 3

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

Answer 4

您也可以使用jquery函数.each

选中所有HTML复选框

4 个答案: