jQuery获取selected，checked，text等表单值

$(document).ready(function() { $("#sButtonId").click(function() { //获取select对象 var selectedObj = $("#selectId option:selected"); //获取当前selected的值 var selected = selectedObj.get(0).value; $("#sResult").html("结果:" + selected); }); $("#cButtonId").click(function() { //获取checkBox对象 var Check = ''; var checkedObj = $("[name='checkboxId'][@checked]"); //获取当前checked的value值 如果选中多个则循环 checkedObj.each(function() { var isCheck = this.value; Check += isCheck; }); $("#cResult").html("结果:" + Check); }); $("#rButtonId").click(function() { //获取radio对象 var radioObj = $("[name='radioId'][@checked]"); //获取当前checked的value值 var radio = radioObj.get(0).value; $("#rResult").html("结果:" + radio); }); $("#tButtonId").click(function() { //获取text对象 var textObj = $("#textId"); //获取当前text的value值 var text = 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值 ：$("#selectId option:selected").get(0) .value
2，获取radio checked值 ：$("[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等表单值。

 

 

javascript代码实例：

select元素:

<select name="selectname" οnchange="changeValue(this); ">
<option value="com">阿斯顿飞</option>
<option value="cn">高合金钢</option>
</select>

javascript function代码：

function changeValue (obj){
obj.options[obj.selectedIndex].text
obj.options[obj.selectedIndex].value
}

其中obj.selectedIndex表示select的索引值，数字；obj.options[]表示option集合的数组，因些，obj.options[obj.selectedIndex].text获取文本值，

而obj.options[obj.selectedIndex].value获取select的值,如：com

二，JQuery代码实例:

select元素:

<select name="selectname" id="selectname ">
<option value="com">阿斯顿飞</option>
<option value="cn">高合金钢</option>
</select>

JQuery function代码：
$("#selectname ").change(function(){
jQuery('option:selected', this).each(function(){
this.value
});
});

通过select的ID直接获取option值，this.value获取option的值，如：biuuu.com

使用非常简单，兼容firefox与IE，通过JQuery与javaScript获取select对象元素，实现所需要的功能。