如何在 jquery 中使用 $() 函数在表单中列出所有输入字段？答案

【问题标题】：How to make list of all input field in a form with a $() function in jquery?如何在 jquery 中使用 $() 函数在表单中列出所有输入字段？
【发布时间】：2011-01-19 16:14:20
【问题描述】：

我的 HTML 表单如下所示

<form id="form1" name="form1" method="post" action="">
number: <input name="formnum" type="text" id="input_1" tabindex="1" size="30" maxlength="30" />
Title:
<select name="title" id="input_2" tabindex="2" >
   <option selected="selected" value=""></option>
   <option  value="Mr." id="option_1 ">Mr.</option>
   <option  value="Mrs." id="option_2">Mrs.</option>
   <option  value="Ms." id="option_3">Ms.</option>
   <option  value="Dr." id="option_4">Dr.</option>
</select>
<label> <input type="radio" name="gender" value="Male" id="input_3" tabindex="3"/>Male </label>
<label> <input type="radio" name="gender" value="Female" id="input_3"/> Female</label>
First Name:
<input name="fname" type="text" id="input_5" tabindex="4" value="" size="30" maxlength="30"  />
Last Name:
<input name="lname" type="text" id="input_6" tabindex="5" value="" size="30" maxlength="30"  /> 
Address:
<input name="address" type="text" id="input_7" tabindex="6" value="" size="30" maxlength="30"  />
<input type="submit" name="Submit" value="Submit" tabindex="16" />
<input type="reset" name="Submit2" value="Reset" tabindex="17" />
</form>

我想按照它们在$(document).ready() 上的浏览器中出现的顺序列出表单中的所有输入元素。我在 jQuery 中编写了以下语句，以按它们在浏览器中出现的顺序列出表单中的 input 元素：

var textboxes = $("#form1 :input")

但此语句仅提供具有 input 标签的元素列表，即所有文本框、单选按钮和提交按钮。
它不包括给定列表中的选择框、文本区域。

这是我的 jQuery 代码：

$(document).ready(function(){

var textboxes = $("#form1 :input"), //gets all the textboxes         
        images = $("img.classforimg");   //gets all the images
    images.hide(); //hide all of them except the first one
alert(textboxes.length);
    textboxes.each(function (i){
                var j = i;
                    $(this).focus(function (){
                images.hide(); //hide all of them except the first one
                                images.eq(0).show();
                images.eq(j).show();
                });
            });

**Here Jquery code for form validation**
**Here Jquery code of Custom validation methods**
});

问题：

我怎样才能得到表单中所有元素的列表，它们在$(document).ready() 上的浏览器中出现的顺序，包括所有输入文本框、单选按钮组、复选框、选择框、文本区域和按钮？李>
上述语句将上述形式的单选按钮视为单独的单选按钮，而不将它们视为一个组，但实际上上述单选按钮属于同一组。那么如何解决这些问题呢？

请朋友们帮帮我！谢谢！

【问题讨论】：

标签： jquery each

【解决方案1】：

 $('#form1 input,#form1 select,#form1 textarea')

或

$('#form1').find('select,input,textarea')

针对答案 2 更新：

$('#form1').find('select,input[type!=radio],textarea,input[type=radio]:checked')

您可以使用input[type=radio]:checked 找到选定的单选输入，但是如果未选择组中的单选选项，您将不会获得任何选项。 JQuery 应该按照它们在 DOM 中的相同顺序来解析它

【讨论】：

谢谢你，杰卡！等待您的回复。
谢谢你，杰卡！您的解决方案有效并解决了我的第一个问题。非常感谢！

【解决方案2】：

如果你想要它们出现的实际顺序，试试这个：

$("#form1").find("*").filter(function() {
    return !jQuery.inArray(this.tagName.toUpperCase(), ["INPUT","SELECT","TEXTAREA"]);
})

【讨论】：

@Gumbo - jjacka 的解决方案不是确保正确顺序的可靠方法吗？换句话说，使用该解决方案，jQuery 的行为如何？它是否按请求的顺序对每个选择器进行单独查找，然后按该顺序添加相应的结果？
@patrick：我认为 jQuery 会分别选择每种类型，然后合并结果。这意味着首先是所有select 元素，然后是input 元素，然后是textarea 元素。但我可能错了。

【解决方案3】：

var data = $('#form1').serialize();

然后做一些正则表达式从字符串中取出键:-)

【讨论】：