jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值 .

jquery中 如何设置和取得 radio， checkbox， select， multiple的select 的值，稍微整理了一下。 先放在这里，以后如果有更深刻的认识，再来维护此文章。

注意引用一个jquery的包。

[html] view plain copy print ?

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5.     <title>radio，checkbox，select的使用</title>  
6.     <script src="./js/jquery-1.6.2.js"></script>  
7.     <script>  
8.         $(document).ready(function () {  
9.               
10.             // 屏蔽浏览器表单默认的记忆功能  
11.             $('input').attr("autocomplete", "off");  
12.               
13.             // radio设置默认值  
14.             $('input:radio[id=rd2]').attr("checked","checked");  
15.             // checkbox设置默认值  
16.             $('input:checkbox[id=ch2]').attr("checked","checked");  
17.             $('input:checkbox[id=ch3]').attr("checked","checked");  
18.             // select设置默认值  
19.             $('#weekSelect').val("2");  
20.             // multiple的select设置默认值  
21.             $('#studentSelect').val(["2","3"]);  
22.               
23.             // 取值  
24.             $('#submitBtn').click(function () {  
25.                 // radio选中的内容  
26.                 alert($('input:radio[name=color]:checked').val());  
27.                 // checkbox选中的内容  
28.                 $('input:checkbox[name=size]:checked').each( function() {  
29.                       alert($(this).val());  
30.                 });  
31.                 // select选中的内容  
32.                 alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());  
33.                 // multiple的select选中的内容  
34.                 var student = $("#studentSelect").val();  
35.                 for(var key in student){  
36.                   alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());  
37.                 }      
38.             });  
39.         });                  
40.     </script>  
41. </head>  
42.   
43. <body>  
44.      <div id="colorRadio">  
45.         <input type="radio" name="color" id="rd1" value="Red" />Red  
46.         <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow  
47.         <input type="radio" name="color" id="rd3" value="Blue" />Blue  
48.     </div>  
49.     <br>  
50.     <div id="sizeCheck">  
51.         <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt  
52.         <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt  
53.         <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt  
54.     </div>  
55.     <br>  
56.     <div>  
57.     <select id="weekSelect">  
58.         <option value="1">星期一</option>  
59.         <option value="2">星期二</option>  
60.         <option value="3">星期三</option>  
61.         <option value="4">星期四</option>  
62.         <option value="5">星期五</option>  
63.         <option value="6">星期六</option>  
64.         <option value="7">星期日</option>  
65.     </select>  
66.     </div>  
67.     <br>  
68.     <div>  
69.     <select id="studentSelect" multiple="multiple" >  
70.         <option value="1">张三</option>  
71.         <option value="2">李四</option>  
72.         <option value="3">王五</option>  
73.     </select>  
74.     </div>  
75.     <input type="button" id="submitBtn" value="Get Value" />  
76. </body>  
77. </html>  

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>radio，checkbox，select的使用</title>
    <script src="./js/jquery-1.6.2.js"></script>
    <script>
        $(document).ready(function () {
            
            // 屏蔽浏览器表单默认的记忆功能
            $('input').attr("autocomplete", "off");
            
            // radio设置默认值
            $('input:radio[id=rd2]').attr("checked","checked");
            // checkbox设置默认值
            $('input:checkbox[id=ch2]').attr("checked","checked");
            $('input:checkbox[id=ch3]').attr("checked","checked");
            // select设置默认值
            $('#weekSelect').val("2");
            // multiple的select设置默认值
            $('#studentSelect').val(["2","3"]);
            
            // 取值
            $('#submitBtn').click(function () {
                // radio选中的内容
                alert($('input:radio[name=color]:checked').val());
                // checkbox选中的内容
                $('input:checkbox[name=size]:checked').each( function() {
                      alert($(this).val());
                });
                // select选中的内容
                alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());
                // multiple的select选中的内容
                var student = $("#studentSelect").val();
                for(var key in student){
                  alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());
                }    
            });
        });                
    </script>
</head>

<body>
     <div id="colorRadio">
	    <input type="radio" name="color" id="rd1" value="Red" />Red
	    <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow
	    <input type="radio" name="color" id="rd3" value="Blue" />Blue
	</div>
	<br>
	<div id="sizeCheck">
	    <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt
	    <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt
	    <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt
	</div>
	<br>
	<div>
	<select id="weekSelect">
	    <option value="1">星期一</option>
	    <option value="2">星期二</option>
	    <option value="3">星期三</option>
	    <option value="4">星期四</option>
	    <option value="5">星期五</option>
	    <option value="6">星期六</option>
	    <option value="7">星期日</option>
	</select>
	</div>
	<br>
	<div>
	<select id="studentSelect" multiple="multiple" >
	    <option value="1">张三</option>
	    <option value="2">李四</option>
	    <option value="3">王五</option>
	</select>
	</div>
	<input type="button" id="submitBtn" value="Get Value" />
</body>
</html>