Jquery操作select,radio,checkBox,获取选中项的值和文本，根据值和文本设置选中项

1. 来之http://blog.csdn.net/wangsen2235068/article/details/8910423
2.   <script src="../Scripts/jquery-1.4.1.min.js"></script>  
3.     <script type="text/ecmascript">  
4.         $(function () {  
5.             //select  
6.             $("#Button1").click(function () {  
7.                 var v = $("#selProgram").val();  
8.                 alert(v);  
9.             });  
10.             $("#Button2").click(function () {  
11.                 var v = $("#selProgram option:selected").text();//表单过滤器 :enabled,:disabled,:checked,:selected  
12.                 alert(v);  
13.             });  
14.             $("#Button3").click(function () {  
15.                 $("#selProgram option[value='3']").attr("selected", "selected");//属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值，可以通过text()方法获取到值，但是不可以通过attr("text")获取，因为没有这个属性  
16.             });  
17.             $("#Button4").click(function () {  
18.                 $("#selProgram option").each(function () {   
19.                     if($(this).text()=="Java")  
20.                         $(this).attr("selected", "selected");  
21.                 });  
22.             });  
23.   
24.   
25.             //radio  
26.             $("#Button5").click(function () {  
27.                 var v = $(":radio[name='radProgram']:checked").val();  
28.                 alert(v);  
29.             });  
30.             $("#Button6").click(function () {  
31.                 var v = $(":radio[name='radProgram']:checked").next().text();//表单过滤器 :enabled,:disabled,:checked,:selected  
32.                 alert(v);  
33.             });  
34.             $("#Button7").click(function () {  
35.                 $(":radio[name='radProgram'][value='3']").attr("checked", "checked");//属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值，可以通过text()方法获取到值，但是不可以通过attr("text")获取，因为没有这个属性  
36.             });  
37.             $("#Button8").click(function () {  
38.                 $(":radio[name='radProgram']").each(function () {  
39.                     if ($(this).next().text() == "Java")  
40.                         $(this).attr("checked", "checked");  
41.                 });  
42.             });  
43.   
44.   
45.             //Checkbox  
46.             $("#chkAll").click(function () {  
47.                 $("#divProgram :checkbox").attr("checked", $(this).attr("checked"));  
48.             });  
49.             $("#Button9").click(function () {  
50.                 //多个值，直接.val()默认第一个的值  
51.                 $("#divProgram :checkbox:checked").each(function () {  
52.                     alert($(this).val());  
53.                 });  
54.             });  
55.             $("#Button10").click(function () {  
56.                 $("#divProgram :checkbox:checked").each(function () {  
57.                     alert($(this).next().text());  
58.                 });  
59.             });  
60.             $("#Button11").click(function () {  
61.                 //属性过滤器,必须是dom已经有了这个属性,比如虽然select有文本值，可以通过text()方法获取到值，但是不可以通过attr("text")获取，因为没有这个属性  
62.                 $("#divProgram :checkbox[value='2']").attr("checked","checked");  
63.             });  
64.             $("#Button12").click(function () {  
65.                 $("#divProgram :checkbox").each(function () {  
66.                     if ($(this).next().text() == "PHP") {  
67.                         $(this).attr("checked", "checked");  
68.                     }  
69.                 });  
70.             });  
71.         });  
72.     </script>  

1.         });  
2.     </script>  

[html]  view plain  copy

1. select:<select id="selProgram">  
2.    <option value="1">C#</option>  
3.    <option value="2">Java</option>  
4.    <option value="3">PHP</option>  
5. </select>  
6. <input id="Button1" type="button" value="获取选中的value" />  
7. <input id="Button2" type="button" value="获取选中的text" />  
8. <input id="Button3" type="button" value="通过value的属性过滤器设置选中项" />  
9. <input id="Button4" type="button" value="通过文本值设置选中项" />  
10.   
11. <p></p>  
12. radio:  
13. <input id="Radio1" type="radio" value="1" name="radProgram" checked="checked" /> <label>C#</label>   
14. <input id="Radio2" type="radio" value="2" name="radProgram" /><label>Java</label>  
15. <input id="Radio3" type="radio" value="3" name="radProgram"/><label>PHP</label>  
16. <input id="Button5" type="button" value="获取选中的value" />  
17. <input id="Button6" type="button" value="获取选中的text" />  
18. <input id="Button7" type="button" value="通过value的属性过滤器设置选中项" />  
19. <input id="Button8" type="button" value="通过文本值设置选中项" />  
20.   
21. <p></p>  
22. checkbox:  
23. <div id="divProgram" style="border:1px gray solid">  
24.     <input id="chkAll" type="checkbox" value="all" /><label>全选</label>   
25.     <input id="Checkbox1" type="checkbox" value="1" checked="checked"/><label>C#</label>   
26.     <input id="Checkbox2" type="checkbox" value="2" /><label>Java</label>  
27.     <input id="Checkbox3" type="checkbox" value="3" /><label>PHP</label>   
28.     <input id="Button9" type="button" value="获取选中的value" />  
29.     <input id="Button10" type="button" value="获取选中的text" />  
30.     <input id="Button11" type="button" value="通过value的属性过滤器设置选中项" />  
31.     <input id="Button12" type="button" value="通过文本值设置选中项" />  
32. </div>  
33. <input id="Checkbox4" type="checkbox" />区域外  
34. 1. <pre name="code" class="html"></pre>  
    2. <pre><pre></pre></pre>  
    3. <pre></pre>  
    4. <pre></pre>  
    5. <pre></pre>  
    6. <pre></pre>