Javascript 如何从特定字段集中获取表单字段？

我正在编写一个划分为字段集的HTML表单，我需要从函数中的特定字段集获取表单字段。
现在是这样的,

function conta(Fieldset){  
    var Inputs = Fieldset.getElementsByTagName("input");  
    var Selects = Fieldset.getElementsByTagName("select");  
    /* Doing the stuff I need to do in two iterations, one for each field type */  
}

但是谁知道未来会发生什么，如果表单得到一些新的字段类型（收音机、复选框），这对mantain来说可能会很糟糕。
我知道

form

元素具有返回所有表单字段的

elements

属性，我希望可以使用类似的属性。

---

（我知道我仍然需要在迭代过程中区分一系列条件中的字段类型，但我认为这样做会更快更容易保存。除非不是这样，我也不应该这样做）

还没有测试过这一点，也不知道它将如何工作，但您可以在这里使用JQuery将所有元素选择到JQuery对象中

//$("input select textarea").each(function() {
$(":input").each(function() { //even better
    // do stuff here
});

---

这至少会清理代码，尽管您仍然需要根据您提到的字段类型添加条件语句。

@Ryan在正确的轨道上，如果您想使用jQuery（我也会），但我建议您遵循以下几点：

$('fieldset#fieldset1 > input[type=text]').each( function() {
      ... do something for text inputs }
 );

$('fieldset#fieldset1 > input[type=radio]').each( function() {
      ... do something for radios }
 );

$('fieldset#fieldset1 > select').each( function() {
      ... do something for selects }
 );

$('fieldset#fieldset1 > textarea').each( function() {
      ... do something for textareas }
 );

---

作为对if-then-else构造的改进。

单选按钮和复选框仍然是输入标记，将位于Inputs变量中。问题是，您需要为选中状态添加处理程序，以查看选择了哪些单选按钮和复选框

更糟糕的是，您可以有多个单选按钮和复选框具有相同的名称。。。事实上，您必须为单选按钮设置一个按钮，否则它们无法按预期工作。

没有jQuery，没有问题：

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames)
        elements.concat(fieldset.getElementsByTagName(tagNames[i]);

    for (var i in elements) {
        // Do what you want
    }
}

---

Filip Dupanović解决方案和第二条Cargowire评论对我来说很有效，但只做了一点小修改。Cargowire的第二条注释只生成了一个数组，该数组只包含标记名数组的切片字符（我本来会在注释中写这个，但到目前为止我还没有这个代表）

以下是有效的方法：

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames) {
        elements = elements.concat([].slice.call(fieldset.getElementsByTagName(tagNames[i])));
    }
    for (var i in elements) {
        // Do what you want.
        // Attributes of the selected tag's can be referenced for example as 
        // elements[i].value = ...;
    }
}

---

一个有用的应用是定义只重置一个字段集而不是整个表单的按钮。只需使用

elements[i].value=elements[i].defaultValue//执行所需操作

部分中的code>，以便重置文本输入。当然，将condat函数绑定到按钮的onclick事件上，该按钮提供fieldset dom元素作为参数输入。

您应该只使用queryselectoral：

function condat(fieldset) {
   var elements = fieldset.querySelectorAll('input, select, textarea');
   elements.forEach(function(element){
     // Do what you want with every element
   });
}

---

太糟糕了。这真的让这类事情简单多了。jQuery并没有那么大，你最终会编写很多别人已经写过的代码。注意：Array.prototype.concat不会修改数组的内容，所以行应该是elements=elements.concat（…）另外：getElementsByTagName返回一个HtmlCollection而不是数组，因此您可能需要执行以下操作：

elements=elements.concat（[].slice.call（标记名[i]）