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

Question

我有一個表格，如果需要，您可以在其中附加其他輸入。 所以我這樣命名我的表單。

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

我想使用名稱“sample[]”訪問輸入的所有值，並使用 javascript 將其存儲在數組中。 我在下面使用了這個代碼：

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

如何單獨獲取所有值？ 任何幫助將不勝感激。 謝謝！！！

Answer 1

將此添加到您的 js 函數中，您將在 values 數組中獲得輸入值。 在這里，我得到了一個包含 name = "sample[]" 的所有元素的 NodeList 並轉換為 Array 以便於處理數據。

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[] eval 值完全不同。 因此是所有的混亂。 如果您非常確定要將 'sample[]' 作為name prop of 的（字符串）值傳遞，請確保將其字符串化並添加它。

Answer 3

輸入的name="sample[]"是name="sample[]" 。 getElementsByName的參數是元素的 name 屬性的值，因此應該是"sample[]" 。

getElementsByName 將返回一個NodeList ，您可以使用foreach進行循環，使用item按索引從 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 4

在 ES6 中：

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

但我不會使用sample[]作為輸入名稱。

Answer 5

var sample = document.getElementsByName('sample[]');
在sample[]之間添加引號。 盡量避免在輸入名稱中使用[] 。