具有类似数组名称的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标记。这是一把小提琴。

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

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

Answer 2

<input name="color[3]" id="color_3" type="text" />
var element = document.getElementsByName("color[3]");
alert(element[0].id);

它很好用。。您应该记住的是返回类型是元素数组，而不是单个元素