Question

所以我有一个带有一堆文本字段的表单。有些字段是相关的，我需要遍历它们并在值字段中添加数字。

这些字段的名称都不同，所以我可以区分它们，所以我不确定如何查看它们。

我可以将它们全部设置为相同的ID或相同的东西，然后根据共享属性进行循环吗？我宁愿不必手动完成所有操作，但如果必须的话，我可以这样做。

我想也许如果所有字段都是表单数组的一部分，我可以弄清楚我想要的字段在哪里开始和停止并以这种方式循环它们？嗯

Answer 1

原生JavaScript更简单。表单节点是其所有命名控件的数组，以及具有属性的对象。

W3C解决方案非常优雅。

var form = document.querySelectorAll( 'form' )[0];
var total = 0;
for (var i = 0; i < form.length; i++) {
    console.log( form[i] );
    total += parseInt( form[i].value );
}

不需要图书馆。唯一的缺点是表单中的fieldset也会被迭代。

Answer 2

给他们所有的班级名称。例如。 class="inputs"。将它们添加到数组中，然后使用for循环进行循环。

var inputs = document.getElementsByClassName("inputs");
for(i =0; i < inputs.length; i++) 
{
  // whatever you want to do now.
}

Answer 3

之前已经提出这个问题，尽管问题的措辞不同。

点击此处查看多种解决方案，包括tinkerBot已经提供的解决方案

How to parse input[] values and put them into a Javascript Array

Answer 4

如果您要编写语义HTML，则应将相关的<input>字段分组到fieldset，为其添加ID，然后使用以下内容循环显示：

var total = 0;
var inputs = document.querySelector('yourFieldsetId').querySelectorAll('input');
for (var i = 0; i < inputs.length; ++i) {
  total += Number(inputs[i].value);
}

Answer 5

如果您想要给定表单的所有输入，可以使用jquery轻松获取表单中的所有输入并迭代值：

http://jsfiddle.net/3TyZA/

$("#form1").find("input").each(function( index ) {
     console.log($(this).val()); // the value of each input
});

循环使用不同名称的表单字段

5 个答案: