1

我目前从我的.getElementsByName()查询中得到 5 个结果，并且在抛出一个 simple 时循环它们按预期进行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）。

我错过了什么？

4

2 回答 2

1

尝试

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

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

于 2018-01-19T01:53:28.263 回答
1

关于原因，我同意@Isaac - 但如果您更改为如下的querySelectorAll，我有一个替代解决方案 - 它适用于所有复选框并应用更改后的名称[]。

window.onload = function() {
    var fields = document.querySelectorAll("[name='target']");
    for (var i = 0; i < fields.length; i++) {
         fields[i].name = 'target[]';
    }
}
<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>

于 2018-01-19T01:55:49.090 回答