使用 jQuery 或纯 Javascript 访问 HTML 输入文本框数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2192091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing an array of HTML input text boxes using jQuery or plain Javascript
提问by greggannicott
I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:
我希望创建一个包含动态数量的输入文本框的表单。我希望每个文本框都构成一个数组的一部分（理论上这将使我更容易循环遍历它们，特别是因为我不知道最终会存在的文本字段的数量）。HTML 代码类似于：
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.
然后这些数据将被发送到一个 PHP 脚本，并被表示为一个数组 - 或者至少，这是理论。
So my first question is, is this achievable using HTML? Are forms designed to work that way?
所以我的第一个问题是，这可以使用 HTML 实现吗？表单是否旨在以这种方式工作？
If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?
如果答案是“是”，那么我将如何访问每个使用 jQuery 或失败的纯旧 JavaScript？
I've attempted to achieve this using the following jQuery code:
我尝试使用以下 jQuery 代码实现此目的：
someval = $('#field[1]').val();
and
和
someval = $('#field')[1].val();
and the following JavaScript:
以及以下 JavaScript：
someval = document.getElementById('related_link_url')[1].value;
But I've not had any luck.
但我没有任何运气。
Thanks in advance.
提前致谢。
Edit:
编辑：
I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.
我应该注意到，从 Javascript 的角度来看，我已经在每个元素的 ID 类似于 field_1、field_2 等的情况下工作了。但是，我觉得如果我可以通过将每个文本框放入数组来实现它，它将使代码更整洁、更容易管理。
采纳答案by Crozin
First of all, idattribute cannot contains [or ]character.
首先，id属性不能包含[或]字符。
There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:
有很多方法可以获取对这些元素的 jQuery/普通 JavaScript 引用。您可以使用后代选择器：
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
You can also use attribute selector:
您还可以使用属性选择器：
$("input[name^=field]");
I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all inputelements (document.getElementsByTagName) and then loop through array of these elements and check each element (whether it has nameattribute which value starts with field).
我不确定这是否是唯一的方法，但我认为在普通 JavaScript 中，您必须获取所有input元素 ( document.getElementsByTagName)，然后遍历这些元素的数组并检查每个元素（它是否具有name以 开头的属性field）。
回答by Andy E
Give each element a class and access the group using jQuery:
给每个元素一个类并使用 jQuery 访问该组：
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
jQuery：
$("input.fields").each(function (index)
{
// Your code here
});
This will run the anonymous function on each inputelement with a classname of "fields", with the thiskeyword pointing to the current element. See http://api.jquery.com/each/for more info.
这将在input类名为“fields”的每个元素上运行匿名函数，this关键字指向当前元素。有关更多信息，请参阅http://api.jquery.com/each/。
