javascript: document.getElementsByName("sample[]") 不工作

Question

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

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

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

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

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

Answer 1

字符串值 'sample[]' 与 sample[] 的评估值完全不同。这就是一切的混乱。如果您非常确定要将 'sample[]' 作为 name prop of 的（字符串）值传递，请确保将其字符串化并添加它。

Answer 2

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

Answer 3

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

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

测试了一下，下面是link到fiddle。 https://jsfiddle.net/mfw4rv9o/13/

Answer 4

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

getElementsByName 将 return NodeList for which you could use a foreach to loop over, use item 到 return NodeList 中的一个节点，通过索引或使用索引 sample[0].

要在 es6 中获取数组中的所有值，您可以使用展开运算符和映射：

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 5

在 ES6 中：

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

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

javascript: document.getElementsByName("sample[]") 不工作

javascript: document.getElementsByName("sample[]") not working

javascript

arrays

getelementsbyname