如何使用数值数组作为表单输入名称？ [复制]答案

【问题标题】：How to use a numeric array as a form input name? [duplicate]如何使用数值数组作为表单输入名称？ [复制]
【发布时间】：2016-03-21 19:22:01
【问题描述】：

查看了许多有关此问题的问题 - 并没有找到真正的答案。所以这里...

我有一个表单，我将在其中动态添加部分（在本例中为“与会者信息”），因此我想使用 firstName[0]、firstName[1] 等名称。我已经编写了添加代码的代码每个部分都有一个新的数字索引。

不过……

当我尝试使用 JQuery（或只是普通的 JS）来读取任何表单字段的值（无论是否动态创建）时，我都无法定义。如果我将名称更改为firstName1、firstName2 等，它可以工作。仅当我使用数字数组索引时.. nada.

我试过了……

$('#firstName[' + indexNum + ']')val();
$('input[name=firstName[' + indexNum + ']]').val();

.. 以及其他几件事。（是的，ID 与名称相同。）

我有什么遗漏吗？

【问题讨论】：

顺便说一句，您选择的命名约定不好。 HTML id 看起来像一个 JavaScript 索引。为什么不直接命名元素：firstName1 和 firstName2 等？
@ScottMarcus 感谢 Scott - 但我试图找到一种更简单的方法来使用数组循环并将信息（基于结果）保存到不同的表中。这似乎比解析带有可能未知数字的名称更简单。
感谢其他人指出我根本没有看到的问题。就在你认为你已经涵盖了研究问题的时候......呃。谢谢大家的帮助 - 像往常一样。
你最好遵循这里的约定。提供独特且富有表现力的元素id。不要担心稍后将它们全部收集到一个数组中，因为这很容易使用document.querySelectorAll(selector)。一旦它们在数组中，循环就很容易了。相信我，你越是努力让名字如你所描述的那样工作，你在路上的痛苦就越大。
@ScottMarcus 感谢Scott 的提示。我会看看！

标签： javascript jquery html

【解决方案1】：

见Category:Attribute

选择器表达式中的属性值必须遵循 W3C 的规则 CSS 选择器；一般来说，这意味着除了valid identifier 之外的任何内容都应该用引号引起来。

单引号内的双引号：$('a[rel="nofollow self"]')

双引号内的单引号：$("a[rel='nofollow self']")

单引号内的转义单引号：$('a[rel=\'nofollowself\']')

双引号内的转义双引号：$("a[rel=\"nofollow self\"]")

您选择的变体通常是风格问题或方便。

尝试将属性值用单引号括起来'firstName[" + indexNum + "]'

var indexNum = 0;

console.log($("input[name='firstName[" + indexNum + "]']").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="firstName[0]" value="abc" />

或者使用两个反斜杠 \\ 字符转义 [ 和 ] 字符

var indexNum = 0;

console.log($("input[name=firstName\\[" + indexNum + "\\]]").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="firstName[0]" value="abc" />

【讨论】：

虽然这与 Zakaria 的回答有些相同，但我会选择这个，因为它更完整。 Zakaria 的回答也很棒。希望我能标记两个答案！

【解决方案2】：

你应该添加双引号：

$('input[name="firstName[' + indexNum + ']"]').val();
______________^___________________________^

希望这会有所帮助。

for(var i=0;i<3;i++){
  alert($('input[name="firstName[' + i + ']"]').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstName[0]" value="11"/>
<input type="text" name="firstName[1]" value="22"/>
<input type="text" name="firstName[2]" value="33"/>

【讨论】：

【解决方案3】：

正如Jquery page 中所指出的，“[”和“]”是特殊字符，必须进行转义才能用作元素的名称。

你应该使用：

$('#firstName\\[' + indexNum + '\\]')val();
$('input[name=firstName\\[' + indexNum + '\\]]'

【讨论】：