使用 jQuery 或纯 Javascript 访问一组 HTML 输入文本框

Posted 2023-03-05

【中文标题】使用 jQuery 或纯 Javascript 访问一组 HTML 输入文本框

【英文标题】：Accessing an array of HTML input text boxes using jQuery or plain Javascript

【发布时间】：2011-01-12 14:54:32

【问题描述】：

我希望创建一个包含动态数量的输入文本框的表单。我希望每个文本框都构成一个数组的一部分（理论上这会使我更容易循环它们，特别是因为我不知道最终将存在的文本字段的数量）。 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>

然后，这些数据将被发送到 php 脚本并被表示为一个数组 - 或者至少理论上是这样。

所以我的第一个问题是，这可以使用 HTML 实现吗？表单是按这种方式设计的吗？

如果答案是“是”，那么我将如何使用 jQuery 访问每一个，或者使用普通的旧 javascript 失败？

我尝试使用以下 jQuery 代码来实现这一点：

someval = $('#field[1]').val();

和

someval = $('#field')[1].val();

以及以下 JavaScript：

someval = document.getElementById('related_link_url')[1].value;

但我没有运气。

提前致谢。

编辑：

我应该注意到，从 Javascript 的角度来看，我已经让它在每个元素的 ID 类似于 field_1、field_2 等的情况下工作。但是，我觉得如果我可以通过将每个文本框放入一个数组，它会使代码更整洁，更容易管理。

【参考方案1】：

给每个元素一个类并使用 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:

$("input.fields").each(function (index)

    // Your code here
);

这将对每个类名为“fields”的input 元素运行匿名函数，this 关键字指向当前元素。请参阅http://api.jquery.com/each/ 了解更多信息。

【讨论】：

这很有趣。所以名称字段可以包含 []，但 ID 不能。所以至少从 PHP 的角度来看，我仍然可以将 $_POST['field'] 数据视为一个数组？并且使用 $("input[name=field[1]]").val() 我仍然可以使用 jQuery 访问该值。所以关键是使用名称而不是依赖ID。

@greggannicott：名称属性中允许使用方括号，但 ID 属性中不允许使用方括号。我认为将它用于 PHP 的正确方法是每个都有 name="field[]" 而不是 name="field[n]" 但我可能弄错了，两者都可能有效。

【参考方案2】：

首先，id 属性不能包含[ 或] 字符。

有很多方法可以让 jQuery/plain JavaScript 引用这些元素。您可以使用后代选择器：

<fieldset id="list-of-fields">
   <!-- your inputs here -->
</fieldset>

$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");

你也可以使用属性选择器：

$("input[name^=field]");

我不确定这是否是唯一的方法，但我认为在纯 JavaScript 中，您必须获取所有 input 元素 (document.getElementsByTagName)，然后遍历这些元素的数组并检查每个元素（无论是具有name 属性，其值以field 开头）。