jquery学习对单选按钮和复选按钮的操作

声明：下面的例子是本人自己写的，使用<script src="<%=basepath %>work/jQuery-1.7.1.min.js"></script>

这个版本，例子也许和别人讲的不太一样，但是都经过本人测试！

 

注:在下面的例子中一定要注意=和==的区别，前者赋值，后者判断。

 

[html] view plain copy

1. <table>  
2.                              <tr>  
3.                              <td>  
4.                                             作业标题：<input type="text" id="worktitle" value=""/>    <br>  
5.                                             老师：        <input type="text" id="teacher"  value=""/>    <br>  
6.                              课程名称：<input type="text" id="course"  value="">    <br>  
7.                                          学生姓名：   <select name="student" id="student" >  
8.                                            <option>...请选择</option>  
9.                                             <option value="volvo">Volvo</option>  
10.                                             <option value="saab">Saab</option>  
11.                                             <option value="fiat">Fiat</option>  
12.                                             <option value="audi">Audi</option>  
13.                                             </select>  
14.                                             <br>  
15.                                               
16.                             学生 性别：<input type="radio" name="sex" value="男" /> 男    
17.                                       <input type="radio" name="sex" value="女" /> 女    
18.                             <br />  
19.                               
20.                             球类：<input type="checkbox" name="balls" value="football"/>  足球  
21.                                         <input type="checkbox" name="balls" value="basketball"/> 篮球   
22.                                         <input type="checkbox" name="balls" value="badminton"/> 羽毛球   
23.                                         <input type="checkbox" name="balls" value="pingpong"/> 乒乓球   
24.                                             批改日期：从<input type="text" id="reviewdatefrom"    value="">    <br>  
25.                                             到：<input type="text" id="reviewdateto"    value="">    <br>  
26.                                                         <br>  
27.                                             <input type="button" onclick="querywork()"  value="查询"/>  
28.                                             <br><input type="button" id="radiovv"  onclick="getsexvalue()" value=" 测试sex值">  
29.                                             <br><input type="button" id="ccc"  onclick="getballsvalue()" value=" 测试球类值">  
30.                                  </td>  
31.                                  </tr>  
32.                              </table>  
33.   
34.   
35.   
36.   
37.   
38.   
39. <script>  
40.   
41.   
42. /*  
43. //对单选按钮设置默认值--js实现  
44. var rrr=document.getElementsByName("sex");  
45. alert(rrr[0].value);  
46. rrr[0].checked=true;  
47.   
48. //获取单选按钮组的值--js实现  
49. function getsexvalue(){  
50.   var seind=-1;  
51.   var value="";  
52.   var radio=document.getElementsByName("sex");  
53.   for(var i=0;i<radio.length;i++){  
54.     if(radio[i].checked==true){  
55.       value=radio[i].value;  
56.       seind=i;  
57.       break;  
58.     }  
59.   }  
60.   if(seind==-1){  
61.       value=radio[0].value;  
62.   }  
63.   alert(value);  
64.   return value;  
65. }   
66.   
67. */  
68.   
69. ///////////////////////////以下是通过jquery操作单选按钮。///////////////////////  
70. /*  
71. //radio-1 数据初始化选择。(通过value的值)  
72. $('[name="sex"]:radio').each(function() {   
73.    if (this.value == '女') {   
74.      this.checked = true;  
75.    }   
76. });  
77. */  
78.   
79. //radio-2 数据初始化选择,也可以通过index来确定那个被选中.  
80. var dan=$('[name="sex"]:radio');  
81. dan[1].checked=true;  
82.   
83. /*  
84. //radio-3 直接获取值   
85. function getsexvalue() {  
86.     var sed=$('[name="sex"]:checked:radio').val();  
87.     alert('获得的单选按钮值为：' + sed);   
88. }  
89. */  
90.   
91. //radio-4 下面用遍历的方法  
92. /*  
93. function getsexvalue() {  
94.     //var sed=$('[name="sex"]:radio');  
95.     $('[name="sex"]:radio').each(function() {   
96.            if (this.checked ==true) {   
97.                alert(this.value+"--选中了");  
98.            }else{  
99.                alert(this.value+"--没选中");  
100.            }  
101.     });  
102. }  
103. */  
104.   
105. //radio-5 下面用遍历的方法,判断它的值，并设置它的选中状态  
106. function getsexvalue() {  
107.     //var sed=$('[name="sex"]:radio');  
108.     $('[name="sex"]:radio').each(function() {   
109.            if (this.value =='男') {   
110.                this.checked =true;  
111.                alert("设置这个选中--"+this.value);  
112.            }else{  
113.                this.checked =false;  
114.                alert("设置这个未选中--"+this.value);  
115.            }  
116.     });  
117. }  
118.   
119.   
120. ////////////////////////以下是jquery复选框操作////////////////////  
121.   
122. //checkbox-1 设置初始选中值  
123. var chk=$('[name="balls"]:checkbox');  
124. //chk[0].checked=true;  
125. //chk[1].checked=true;  
126.   
127. //checkbox-2 下面可以全部设置成选中  
128. chk.attr("checked", true);  
129. /*  
130. //checkbox-3 遍历获取值  
131. function getballsvalue(){  
132.     $('[name="balls"]:checkbox').each(function() {   
133.            if (this.checked ==true) {   
134.                alert(this.value+"--选中了");  
135.            }else{  
136.                alert(this.value+"--没选中");  
137.            }  
138.     });  
139. }  
140. */  
141.   
142. //checkbox-4 遍历获取值,并根据值来设置其选中状态  
143. function getballsvalue(){  
144.     $('[name="balls"]:checkbox').each(function() {   
145.            if (this.value =='football') {   
146.                this.checked =true;  
147.                alert("设置这个选中--"+this.value);  
148.            }else{  
149.                this.checked =false;  
150.                alert("设置这个未选中--"+this.value);  
151.            }  
152.     });  
153. }  
154.   
155. </script>  

声明：下面的例子是本人自己写的，使用<script src="<%=basepath %>work/jQuery-1.7.1.min.js"></script>

这个版本，例子也许和别人讲的不太一样，但是都经过本人测试！

 

注:在下面的例子中一定要注意=和==的区别，前者赋值，后者判断。

 

[html] view plain copy

1. <table>  
2.                              <tr>  
3.                              <td>  
4.                                             作业标题：<input type="text" id="worktitle" value=""/>    <br>  
5.                                             老师：        <input type="text" id="teacher"  value=""/>    <br>  
6.                              课程名称：<input type="text" id="course"  value="">    <br>  
7.                                          学生姓名：   <select name="student" id="student" >  
8.                                            <option>...请选择</option>  
9.                                             <option value="volvo">Volvo</option>  
10.                                             <option value="saab">Saab</option>  
11.                                             <option value="fiat">Fiat</option>  
12.                                             <option value="audi">Audi</option>  
13.                                             </select>  
14.                                             <br>  
15.                                               
16.                             学生 性别：<input type="radio" name="sex" value="男" /> 男    
17.                                       <input type="radio" name="sex" value="女" /> 女    
18.                             <br />  
19.                               
20.                             球类：<input type="checkbox" name="balls" value="football"/>  足球  
21.                                         <input type="checkbox" name="balls" value="basketball"/> 篮球   
22.                                         <input type="checkbox" name="balls" value="badminton"/> 羽毛球   
23.                                         <input type="checkbox" name="balls" value="pingpong"/> 乒乓球   
24.                                             批改日期：从<input type="text" id="reviewdatefrom"    value="">    <br>  
25.                                             到：<input type="text" id="reviewdateto"    value="">    <br>  
26.                                                         <br>  
27.                                             <input type="button" onclick="querywork()"  value="查询"/>  
28.                                             <br><input type="button" id="radiovv"  onclick="getsexvalue()" value=" 测试sex值">  
29.                                             <br><input type="button" id="ccc"  onclick="getballsvalue()" value=" 测试球类值">  
30.                                  </td>  
31.                                  </tr>  
32.                              </table>  
33.   
34.   
35.   
36.   
37.   
38.   
39. <script>  
40.   
41.   
42. /*  
43. //对单选按钮设置默认值--js实现  
44. var rrr=document.getElementsByName("sex");  
45. alert(rrr[0].value);  
46. rrr[0].checked=true;  
47.   
48. //获取单选按钮组的值--js实现  
49. function getsexvalue(){  
50.   var seind=-1;  
51.   var value="";  
52.   var radio=document.getElementsByName("sex");  
53.   for(var i=0;i<radio.length;i++){  
54.     if(radio[i].checked==true){  
55.       value=radio[i].value;  
56.       seind=i;  
57.       break;  
58.     }  
59.   }  
60.   if(seind==-1){  
61.       value=radio[0].value;  
62.   }  
63.   alert(value);  
64.   return value;  
65. }   
66.   
67. */  
68.   
69. ///////////////////////////以下是通过jquery操作单选按钮。///////////////////////  
70. /*  
71. //radio-1 数据初始化选择。(通过value的值)  
72. $('[name="sex"]:radio').each(function() {   
73.    if (this.value == '女') {   
74.      this.checked = true;  
75.    }   
76. });  
77. */  
78.   
79. //radio-2 数据初始化选择,也可以通过index来确定那个被选中.  
80. var dan=$('[name="sex"]:radio');  
81. dan[1].checked=true;  
82.   
83. /*  
84. //radio-3 直接获取值   
85. function getsexvalue() {  
86.     var sed=$('[name="sex"]:checked:radio').val();  
87.     alert('获得的单选按钮值为：' + sed);   
88. }  
89. */  
90.   
91. //radio-4 下面用遍历的方法  
92. /*  
93. function getsexvalue() {  
94.     //var sed=$('[name="sex"]:radio');  
95.     $('[name="sex"]:radio').each(function() {   
96.            if (this.checked ==true) {   
97.                alert(this.value+"--选中了");  
98.            }else{  
99.                alert(this.value+"--没选中");  
100.            }  
101.     });  
102. }  
103. */  
104.   
105. //radio-5 下面用遍历的方法,判断它的值，并设置它的选中状态  
106. function getsexvalue() {  
107.     //var sed=$('[name="sex"]:radio');  
108.     $('[name="sex"]:radio').each(function() {   
109.            if (this.value =='男') {   
110.                this.checked =true;  
111.                alert("设置这个选中--"+this.value);  
112.            }else{  
113.                this.checked =false;  
114.                alert("设置这个未选中--"+this.value);  
115.            }  
116.     });  
117. }  
118.   
119.   
120. ////////////////////////以下是jquery复选框操作////////////////////  
121.   
122. //checkbox-1 设置初始选中值  
123. var chk=$('[name="balls"]:checkbox');  
124. //chk[0].checked=true;  
125. //chk[1].checked=true;  
126.   
127. //checkbox-2 下面可以全部设置成选中  
128. chk.attr("checked", true);  
129. /*  
130. //checkbox-3 遍历获取值  
131. function getballsvalue(){  
132.     $('[name="balls"]:checkbox').each(function() {   
133.            if (this.checked ==true) {   
134.                alert(this.value+"--选中了");  
135.            }else{  
136.                alert(this.value+"--没选中");  
137.            }  
138.     });  
139. }  
140. */  
141.   
142. //checkbox-4 遍历获取值,并根据值来设置其选中状态  
143. function getballsvalue(){  
144.     $('[name="balls"]:checkbox').each(function() {   
145.            if (this.value =='football') {   
146.                this.checked =true;  
147.                alert("设置这个选中--"+this.value);  
148.            }else{  
149.                this.checked =false;  
150.                alert("设置这个未选中--"+this.value);  
151.            }  
152.     });  
153. }  
154.   
155. </script>