jQuery框架获取及设置单选框、多选框、文本框内容

开发过程中经常要处理页面表单元素，如：在下拉框select中获取selected的value值，在复选框checkBox中获取 checked的value值等，来触发和调用其它页面表单元素，制作出交互性强，页面友好的表单。jQuery通过元素$(#id)产生一个 Object对象，通过对获取的对象深入了解，完全可以获取任何页面元素中的任何信息，为了工作方便，我总结了相关jQuery操作object对象的方 法，获取下拉框selected，复选框和单选框checked，文本框value值，供参考。

表单实例：

一，html部分

<form>

<!--获取select的selected值biuuu.com-->

<selectid="selectId"><optionvalue="biuuu_s1">s1</option>

<optionvalue="biuuu_s2">s2</option>

<optionvalue="biuuu_s3">s3</option>

<optionvalue="biuuu_s4">s4</option>

</select>

<inputtype="button"id="sButtonId"value="获取selected值"/><spanid="sResult"></span><br/>

<!--获取checkbox的checked值biuuu.com-->

<inputtype="checkbox"name="checkboxId"value="biuuu_c1"/>c1<inputtype="checkbox"name="checkboxId"value="biuuu_c2"/>c2<inputtype="checkbox"name="checkboxId"value="biuuu_c3"/>c3<inputtype="checkbox"name="checkboxId"value="biuuu_c4"/>c4<inputtype="button"id="cButtonId"value="获取checkbox值"/><spanid="cResult"></span><br/>

<!--获取radio的checked值biuuu.com-->

<inputtype="radio"name="radioId"value="biuuu_r1"/>r1<inputtype="radio"name="radioId"value="biuuu_r2"/>r2<inputtype="radio"name="radioId"value="biuuu_r3"/>r3<inputtype="button"id="rButtonId"value="获取radio值"/><spanid="rResult"></span><br/>

<!--获取text的value值biuuu.com-->

<inputtype="text"id="textId"value=""/><inputtype="button"id="tButtonId"value="获取text值"/><spanid="tResult"></span></form>

二，JS部分

$(document).ready(function(){

$("#sButtonId").click(function(){//获取select对象

varselectedObj=$("#selectIdoption:selected");//获取当前selected的值

varselected=selectedObj.get(0).value;$("#sResult").html("结果:"+selected);

});

$("#cButtonId").click(function(){//获取checkBox对象

varCheck='';

varcheckedObj=$("[name='checkboxId'][@checked]");//获取当前checked的value值如果选中多个则循环

checkedObj.each(function(){varisCheck=this.value;Check+=isCheck;

});

$("#cResult").html("结果:"+Check);

});

$("#rButtonId").click(function(){//获取radio对象

varradioObj=$("[name='radioId'][@checked]");//获取当前checked的value值

varradio=radioObj.get(0).value;$("#rResult").html("结果:"+radio);

});

$("#tButtonId").click(function(){//获取text对象

vartextObj=$("#textId");//获取当前text的value值

vartext=textObj.get(0).value;$("#tResult").html("结果:"+text);

});

});

实例效果如下：(略)

其操作过程如下：

1，jQuery获取object对象，如下拉框select对象，单选框radio对象，复选框checkbox对象，文本框text对象；

2，获取对象值，对于值唯一的元素，如select，radio，text通过get()方法获取value值，对于数据元素，如checkbox通过 each循环获取value值

为什么是get(0)？get(0)如同数组下标，默认值是从0开始的

实例表明，掌握jQuery的object对象调用对于获取表单元素非常有用，可以获取下拉框selected值，复/单选框checked值，文 本text的value值，增强我们制作表单元素的交互性与灵活性，上面实例中主要考虑到jQuery对象的调用原理，代码相对比较多，实际使用中完全可 以精简代码行如下：

1，获取selected值：$("#selectIdoption:selected").get(0).value

2，获取radiochecked值：$("[name='radioId'][@checked]").get(0).value

3，获取text value值：$("#textId").get(0).value

获取表单元素值主要是jQuery中get()对象访问方法，其次是each()方法，记住一点：$(#id)产生的是一个对象，获取其中的值完全 可以使用jQuery对象访问方法。

jQuery对象访问方法列表如下：

1，each()循环，相当于foreach；

2，size()统计个数；

3，length()统计个数；

4，get()单个或多个；

5，index()索引；

jQuery提供丰富的object对象访问方法，通过对访问对象方法的掌握，轻松获取selected，checked，text等表单值。