javascript - 为什么我在以不同方式使用它时无法获得复选框长度？

Question

这是我的代码：

HTML：

<form name="frm1">
    <input type="checkbox" id="chk1" name="chk1[]"  value="1"/>
    <input type="checkbox" id="chk1" name="chk1[]"  value="2"/>
</form>
<button class="test1">Test 1</button>

<form name="frm2">
    <input type="checkbox" id="chk2" name="chk2[]"  value="1"/>
    <!--<input type="checkbox" id="chk2" name="chk2[]"  value="2"/>-->
</form>
<button class="test2">Test 2</button>

<form name="frm3">
    <input type="checkbox" name="chk3[]"  value="1"/>
    <input type="checkbox" name="chk3[]"  value="2"/>
</form>
<button class="test3">Test 3</button>

脚本：

$('button.test3').click(function (){
    alert(document.frm3.chk3.length);// Gives error: document.frm3.chk3 is undefined  
});

$('button.test2').click(function (){
    alert(document.frm2.chk2.length);// Outputs: undefined
});

$('button.test1').click(function (){
    alert(document.frm1.chk1.length);// Gives 2 as expected
});

小提琴：http: //jsfiddle.net/mgsvy/

如果我可以访问 a formbyname和它，elements那么为什么上面会给出意想不到的结果？

Answer 1

你需要使用alert(document.frm3["chk3[]"].length);

document.frm3使用 name 属性来标识元素，在您的情况下，复选框的名称是chk3[]您需要使用的document.frm3["chk3[]"]

演示：小提琴

Answer 2

你可以使用document.frm3['chk3[]'].length或document.getElementsByName这样的财产，

document.getElementsByName('chk1[]').length

document.getElementsByName('chk2[]').length

document.getElementsByName('chk3[]').length

现场演示

Answer 3

防水的方法在这里：http: //jsfiddle.net/mgsvy/2/

我删除了复选框上的 id，因为您在多个元素上使用了相同的 id，这就是为什么您的行为不一致。由于名称中包含括号，因此您必须使用括号表示法来引用该特定名称。

如果只有一个具有该名称的元素，则将其存储为节点而不是节点列表，节点列表没有长度属性并被undefined返回。|| 1确保您仍然获得正确的输出。

alert(document.frm2['chk2[]'].length || 1);