javascript： document.getElementsByName( "sample[]" ) 不起作用

Question

我有一个表单，如果需要，您可以在其中附加其他输入。所以我这样命名我的表格。

<input type="text" name="sample[]" />

我想访问名为"sample[]"的输入的所有值，并使用 javascript 将其存储在数组中。我在下面使用了这段代码：

var sample = document.getElementsByName(sample[]);

如何单独获取所有值？任何帮助将不胜感激。谢谢！！！

Answer 1

将其添加到您的 js 函数中，您将在值数组中获得输入值。 在这里，我得到了一个名称="sample[]"的所有元素的NodeList，并转换为数组以便于处理数据。

var sample = Array.prototype.slice.call(document.getElementsByName('sample[]'));
var values = sample.map((o) => o.value);

测试了它，以下是小提琴的链接。 https://jsfiddle.net/mfw4rv9o/13/

Answer 2

字符串值 'sample[]' 与sample[]的评估值完全不同。因此，这是所有人的混乱。 如果你非常确定要传递 'sample[]' 作为 的 (字符串( 值name的 prop 的 ，请确保将其字符串化并添加。

Answer 3

输入的名称是name="sample[]"。getElementsByName 的参数是元素的 name 属性的值，因此应该"sample[]"。

getElementsByName 将返回一个 NodeList，您可以使用foreach循环，使用 item 按索引从 NodeList 返回节点或使用索引sample[0]。

要在 es6 中获取数组中的所有值，您可以使用 spread 运算符和 map：

let items = [...document.getElementsByName("sample[]")].map(i => i.value);

var sample = document.getElementsByName("sample[]");
console.log(sample[0].value);
console.log(sample.item(0).value);
let items = [...document.getElementsByName("sample[]")].map(i => i.value);
console.log(items);

<form>
<input type="text" name="sample[]" value="value1" />
<input type="text" name="sample[]" value="value2" />
</form>

Answer 4

在 ES6 中：

var values = [...document.querySelectorAll("input[name='sample[]']")].map(x => x.value);

但我不会使用sample[]作为输入名称。

Answer 5

var sample = document.getElementsByName('sample[]');
在sample[]之间添加引号。尽量避免输入名称[]。