javascript - GetElementsByName 带有类似名称的数组

Question

当我命名我的控件以便在 POST 或 GET 中获取数组时，我经常使用这种表示法。

<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />

所以在我的脚本中我可以做

<?php $data=$_GET["color"]; 
for each ($color as $key=>$value) {
   doSomething();
} ?>

经常发生我需要在 javascript 中取回那些 id，但我无法取回它们，所以我经常像这样在 html 中为每个元素添加一个 ID

<input name="color[3]" id="color_3" type="text" />

这样我就可以使用 document.getElementsById('color_3')

相反，我想找到使用 document.getElementsByName(color[3]) 的方法...但我无法真正让它发挥作用。

有什么帮助吗？

Answer 1

如果你想要所有的颜色输入，你可以使用querySelectorAll而是查询名称属性:

document.querySelectorAll("input[name^='color[']")

这会在文档中查找名称属性以 color[ 开头的所有 input 标记。 Here这是一个 fiddle 。

如果你只想要color[3]，你可以使用:

var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);