JQuery 操作select checkbox radio

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

 

表单实例：

一，html部分

1. <form>
2. <!-- 获取select的selected值 biuuu.com-->
3. <select id="selectId">
4. <option value="biuuu_s1">s1</option>
5. <option value="biuuu_s2">s2</option>
6. <option value="biuuu_s3">s3</option>
7. <option value="biuuu_s4">s4</option>
8. </select>
9. <input type="button" id="sButtonId" value="获取selected值" />
10. <span id="sResult"></span><br />
12. <!-- 获取checkbox的checked值 biuuu.com-->
13. <input type="checkbox" name="checkboxId" value="biuuu_c1" />c1
14. <input type="checkbox" name="checkboxId" value="biuuu_c2" />c2
15. <input type="checkbox" name="checkboxId" value="biuuu_c3" />c3
16. <input type="checkbox" name="checkboxId" value="biuuu_c4" />c4
17. <input type="button" id="cButtonId" value="获取checkbox值" />
18. <span id="cResult"></span><br />
20. <!-- 获取radio的checked值 biuuu.com-->
21. <input type="radio" name="radioId" value="biuuu_r1" />r1
22. <input type="radio" name="radioId" value="biuuu_r2" />r2
23. <input type="radio" name="radioId" value="biuuu_r3" />r3
24. <input type="button" id="rButtonId" value="获取radio值" />
25. <span id="rResult"></span><br />
27. <!-- 获取text的value值 biuuu.com-->
28. <input type="text" id="textId" value="" />
29. <input type="button" id="tButtonId" value="获取text值" />
30. <span id="tResult"></span>
31. </form>

二，JS部分

1. $(document).ready(function(){
3. $("#sButtonId").click(function(){
4. //获取select对象
5. var selectedObj = $("#selectId option:selected");
6. //获取当前selected的值
7. var selected = selectedObj.get(0).value;
8. $("#sResult").html("结果:"+selected);
9. });
11. $("#cButtonId").click(function(){
12. //获取checkBox对象
13. var Check = '';
14. var checkedObj = $("[name='checkboxId'][@checked]");
15. //获取当前checked的value值 如果选中多个则循环
16. checkedObj.each(function(){
17. var isCheck = this.value;
18. Check += isCheck;
19. });
20. $("#cResult").html("结果:"+Check);
21. });
23. $("#rButtonId").click(function(){
24. //获取radio对象
25. var radioObj = $("[name='radioId'][@checked]");
26. //获取当前checked的value值
27. var radio = radioObj.get(0).value;
28. $("#rResult").html("结果:"+radio);
29. });
31. $("#tButtonId").click(function(){
32. //获取text对象
33. var textObj = $("#textId");
34. //获取当前text的value值
35. var text = textObj.get(0).value;
36. $("#tResult").html("结果:"+text);
37. });
38. });

实例效果如下：

其操作过程如下：
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等表单值。