Question

我目前从我的.getElementsByName()查询获得了5个结果，并且在投掷简单的alert()时循环虽然按预期进行，但是一旦我尝试为这些设置设置新名称结果，它跳过了我的第二场和第四场比赛。

来源：

<form>
    <input type="text" />
    <input type="checkbox" name="target" value=1 />
    <input type="checkbox" name="target" value=2 />
    <input type="checkbox" name="target" value=3 />
    <input type="checkbox" name="target" value=4 />
    <input type="checkbox" name="target" value=5 />
    <input type="text" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
</form>

当我尝试：

window.onload = function() {
    var fields = document.getElementsByName("target");

    for (var i = 0; i < fields.length; i++) {
        alert( fields[i].value );
    }
}

它会抛出所有五个值的警报。

但是，当我尝试这样做时：

for (var i = 0; i < fields.length; i++) {
    fields[i].name = 'target[]';
}

它只会重命名每一个（0,2,4）。

我错过了什么？

Answer 1

尝试

for (var i = fields.length - 1; i >= 0; i--) {
    fields[i].name = 'target[]';
}

我认为这是因为当您更改字段名称时，document::getElementsByName是一个“神奇”列表（请参阅this question），如果您更改，它将从您正在迭代的列表中删除它的名字。

Answer 2

我同意@Isaac的原因 - 但如果您更改为querySelectorAll，我会有另一种解决方案 - 它将适用于所有复选框并应用更改的名称[]。

＆＃13;

window.onload = function() {
    var fields = document.querySelectorAll("[name='target']");
    for (var i = 0; i < fields.length; i++) {
         fields[i].name = 'target[]';
    }
}

＆＃13;

<form>
    <input type="text" />
    <input type="checkbox" name="target" value=1 />
    <input type="checkbox" name="target" value=2 />
    <input type="checkbox" name="target" value=3 />
    <input type="checkbox" name="target" value=4 />
    <input type="checkbox" name="target" value=5 />
    <input type="text" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
</form>

＆＃13;

Javascript：为什么FOR循环跳过其他所有匹配？

2 个答案: