Question

我想获取具有特定类的输入文本的所有值。

例如：

<input type='text' class='aa'>
<input type='text' class='aa'>
<input type='text' class='aa'>
<input type='text' class='aa'>

假设我为类aa编码了4个输入文本。

如何使用javascript获取每个输入文本的所有值？

将很高兴为您提供帮助！

Answer 1

您可以使用jQuery尝试类似的方法：

html：

<input type='text' value="1" class='aa'>
<input type='text' value="2" class='aa'>
<input type='text' value="3" class='aa'>
<input type='text' value="4" class='aa'>

js：

$('.aa').each(function(){
    // code here
    console.log($(this).val());
});

fiddle

Answer 2

您可以使用getElementsByClassName。它将返回具有类名称的元素数组。

var elements = document.getElementsByClassName("aa");
for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].value);
}

Answer 3

只需一行和一些ES6，就可以实现，而无需使用任何jQuery或其他任何工具：

const values = Array.from(document.querySelectorAll('.aa'))
                    .map(input => input.value)

Answer 4

您可以尝试Document.querySelectorAll()定位所有输入：

Document方法querySelectorAll()返回一个静态（非实时） NodeList ，代表与指定选择器组匹配的文档元素列表。

然后forEach()遍历它们，以获取每个输入值以将其推入数组：

document.getElementById('getValues').addEventListener('click', function(){
  var valueArr = [];
  document.querySelectorAll('.aa').forEach(function(el){
    valueArr.push(el.value);
  });
  console.log(valueArr);
});

<input type='text' class='aa'>
<input type='text' class='aa'>
<input type='text' class='aa'>
<input type='text' class='aa'>

<button type="button" id="getValues">Get Values</button>

如何获取具有特定类的输入文本的所有值？

4 个答案: