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>

SCRIPT：

$('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/

如果我可以form及其name访问elements，那么为什么以上会产生意外结果？

Answer 1

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

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

演示：Fiddle

Answer 2

您可以使用document.frm3['chk3[]'].length或document.getElementsByName属性像这样，

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

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

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

<强> Live DEMO

Answer 3

这样做的防水方法是：http://jsfiddle.net/mgsvy/2/

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

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

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

为什么我在使用它时不能获得复选框长度？

3 个答案: