使用类似数组的名称的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])... 但我不知道如何让它正常工作。

可以帮个忙吗？

- AndreaBogazzi

Answer 1

如果你想要获取所有颜色输入，可以使用 querySelectorAll 并查询 name 属性：

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

这段代码会查找文档中所有名称属性以color[开头的标签。 这里是一个有关此代码片段的fiddle示例。

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

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

- CodingIntrigue

Answer 2

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

var element = document.getElementsByName("color[3]");

alert(element[0].id);

程序能够正常运行.. 你需要注意的是 返回类型是一个元素数组而非单个元素

- Prasath K

---

我要再试一次。我用火狐控制台尝试了很多次......好的，它可以工作了...我可以发誓今天早上在我的房间里它还没有工作。有没有可能我可以在某个XML中写<color[3]>xxx</color[3]>？我不认为我可以在XML标签名称中使用"["。 - AndreaBogazzi

@AndreaBogazzi 你可以这样编写XML.. 在这里看：http://jsfiddle.net/xE6bh/ - Prasath K

如果我这样写，会得到“非格式良好”的错误信息...<?xml version="1.0" encoding="ISO-8859-1"?><cose><myform quale="ali"> <ali_id><va>2</va></ali_id> <ali_descrizione><va>Prosciutto</va></ali_descrizione> <ali_ordine><va>0.00</va></ali_ordine> <ali_prezzo><va>6.00</va></ali_prezzo> <ali_listino><ck>N</ck></ali_listino><ing_id[1]><ck>S</ck></ing_id[1]><ing_id[2]><ck>S</ck></ing_id[2]><ing_id[8]><ck>S</ck></ing_id[8]></myform></cose> - AndreaBogazzi

是的，我尝试过了。问题出在']'，但不知道原因。 - Prasath K

在xml规范中不允许这样做。我解决了这个问题，使用<ing_id index="2">xxx</ing_id>并编写一些JavaScript代码来检查是否存在index属性，然后修改标签名称name +'['+key +']'，这样就可以正常工作了。 - AndreaBogazzi