Question

HI，

我有一个HTML，其中有几个带有复选框的项目列表（这些项目放在一个表格中）。表格中的每一行都有以下颜色：

<input type='checkbox' name='Events[]' value='1'>
<input type='checkbox' name='Events[]' value='2'>
etc

我想创建一个链接名称“全选”，点击后将选择所有项目。

我正在使用以下JS，但它无效。

    function SelectAll(form)
    {
        for(var i in form.Events.childNodes)
            if(form.Events.childNodes[i].type == "checkbox")
                form.Events.childNodes[i].checked = true;
    }

Answer 1

您输入的name为Events[]，因此form.Events找不到它

由于方括号不适合JavaScript o.p属性访问快捷方式，因此您必须使用显式的基于字符串的表示法来获取它们：

var inputs= form.elements['Events[]'];

form.elements集合（以及表单集合本身 - form['Events[]'] - 这是同一件事的非标准化快捷方式，但名称冲突的可能性更大）有点老派，并且当只有一个元素时，返回单个元素而不是列表的缺点。你可能最好使用getElementsByName：

var inputs= form.getElementsByName('Events[]');

无论如何，请跟进：

for (var i= inputs.length; i-->0;)
    inputs.checked= true;

永远不要使用for...in来迭代数组或类似数组的序列。它完全不符合你的想法。坚持老式的索引循环。

Answer 2

这里你应该这样做

<input class="Events" type='checkbox' name='Events[]' value='1'>
<input class="Events" type='checkbox' name='Events[]' value='2'>


function SelectAll(form) {
  for (var i = 0; i < form.elements.length; i ++) {
     if (form.elements[i].type == "checkbox" && form.elements[i].className="Events") {
        form.elements[i].checked = true;
     }
  }
)

Answer 3

这仅适用于<form>代码中直接的复选框，而不会嵌套在任何其他代码中。

最简单的方法是使用jQuery：

$(':checkbox', form).attr('checked', true);

选择HTML中的所有复选框

3 个答案: