jQuery——复选框操作_靑祠_前端开发者

学习jQuer对表单、表格操作的过程中,按照书上的例子发现一个问题:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>复选框应用</title>
 5     <style type="text/css">
 6         form{
 7             border:1px solid #ccc;
 8             width:300px;
 9             padding:10px;
10             margin:auto;
11         }    
12     </style>
13     <script type="text/javascript" src="../jquery-3.4.1.js"></script>
14     <script type="text/javascript">
15         $(function(){
16             //书上如此添加按钮事件处理——问题:当单击触发了反选事件之后,再次点击“全选”、“全不选”按钮不起作用,需要按照如下修改,即使用each()方法,才可以;或者将attr()方法修改为prop()方法也可实现预期
17             // $("#CheckedAll").click(function(){
18             //     $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
19             // });
20             // $("#CheckedNo").click(function(){
21             //     $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
22             // });
23 
24             $("#CheckedAll").click(function(){
25                 $("[name=items]:checkbox").each(function(){
26                     this.checked=true;
27                 });
28             });
29             $("#CheckedNo").click(function(){
30                 $("[name=items]:checkbox").each(function(){
31                     this.checked=false;
32                 });
33             });
34             $("#CheckedRev").click(function(){
35                 $("[name=items]:checkbox").each(function(){
36                     // $(this).attr("checked",!$(this).attr("checked"));
37                     this.checked=!this.checked;
38                 });
39             });
40             $("#send").click(function(){
41                 var str="你选中的是:\r\n";
42                 $("[name=items]:checkbox").each(function(){
43                     if(this.checked)
44                         str+=$(this).val()+"\r\n";
45                 });
46                 alert(str);
47             });
48         })
49     </script>
50 </head>
51 <body>
52     <form>
53         你爱好的运动是?<br/>
54         <input type="checkbox" name="items" value="足球"/>足球
55         <input type="checkbox" name="items" value="篮球"/>篮球
56         <input type="checkbox" name="items" value="羽毛球"/>羽毛球
57         <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
58         <input type="button" id="CheckedAll" value="全选"/>
59         <input type="button" id="CheckedNo" value="全不选"/>
60         <input type="button" id="CheckedRev" value="反选"/>
61         <input type="button" id="send" value="提交"/>
62     </form>
63 </body>
64 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>复选框应用</title>
 5     <style type="text/css">
 6         form{
 7             border:1px solid #ccc;
 8             width:300px;
 9             padding:10px;
10             margin:auto;
11         }    
12     </style>
13     <script type="text/javascript" src="../jquery-3.4.1.js"></script>
14     <script type="text/javascript">
15         $(function(){
16             //书上如此添加按钮事件处理——问题:当单击触发了反选事件之后,再次点击“全选”、“全不选”按钮不起作用,需要按照如下修改,即使用each()方法,才可以;或者将attr()方法修改为prop()方法也可实现预期
17             // $("#CheckedAll").click(function(){
18             //     $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
19             // });
20             // $("#CheckedNo").click(function(){
21             //     $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
22             // });
23 
24             $("#CheckedAll").click(function(){
25                 $("[name=items]:checkbox").each(function(){
26                     this.checked=true;
27                 });
28             });
29             $("#CheckedNo").click(function(){
30                 $("[name=items]:checkbox").each(function(){
31                     this.checked=false;
32                 });
33             });
34             $("#CheckedRev").click(function(){
35                 $("[name=items]:checkbox").each(function(){
36                     // $(this).attr("checked",!$(this).attr("checked"));
37                     this.checked=!this.checked;
38                 });
39             });
40             $("#send").click(function(){
41                 var str="你选中的是:\r\n";
42                 $("[name=items]:checkbox").each(function(){
43                     if(this.checked)
44                         str+=$(this).val()+"\r\n";
45                 });
46                 alert(str);
47             });
48         })
49     </script>
50 </head>
51 <body>
52     <form>
53         你爱好的运动是?<br/>
54         <input type="checkbox" name="items" value="足球"/>足球
55         <input type="checkbox" name="items" value="篮球"/>篮球
56         <input type="checkbox" name="items" value="羽毛球"/>羽毛球
57         <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
58         <input type="button" id="CheckedAll" value="全选"/>
59         <input type="button" id="CheckedNo" value="全不选"/>
60         <input type="button" id="CheckedRev" value="反选"/>
61         <input type="button" id="send" value="提交"/>
62     </form>
63 </body>
64 </html>

1 2 3 4 5 6 form{
7 border:1px solid #ccc;
8 width:300px;
9 padding:10px;
10 margin:auto;
11 }
12131415function(){
16//书上如此添加按钮事件处理——问题:当单击触发了反选事件之后,再次点击“全选”、“全不选”按钮不起作用,需要按照如下修改,即使用each()方法,才可以;或者将attr()方法修改为prop()方法也可实现预期17// $(“#CheckedAll”).click(function(){18// $(“[name=items]:checkbox”).attr(“checked”,true);//或者将attr()方法修改为prop()方法也可实现预期19// });20// $(“#CheckedNo”).click(function(){21// $(“[name=items]:checkbox”).attr(“checked”,false);//或者将attr()方法修改为prop()方法也可实现预期22// });2324function(){
25function(){
26thistrue;
27 });
28 });
29function(){
30function(){
31thisfalse;
32 });
33 });
34function(){
35function(){
36// $(this).attr(“checked”,!$(this).attr(“checked”));37thisthis.checked;
38 });
39 });
40function(){
41var;
42function(){
43ifthis.checked)
44this;
45 });
46 alert(str);
47 });
48 })
49505152535455565758596061626364

以下代码同样使用prop()函数,使用attr()方法也不能实现预期

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>复选框应用</title>
 5     <style type="text/css">
 6         form{
 7             border:1px solid #ccc;
 8             width:500px;
 9             padding:10px;
10             margin:auto;
11             font-size:20px;
12         }    
13     </style>
14     <script type="text/javascript" src="../jquery-3.4.1.js"></script>
15     <script type="text/javascript">
16         $(function(){
17             $("#CheckedAll").click(function(){
18                 $("[name=items]:checkbox").prop("checked",this.checked);                                
19             });
20             
21             $("[name=items]:checkbox").click(function(){
22                 var flag=true;
23                 $("[name=items]:checkbox").each(function(){
24                     if(!this.checked)
25                         flag=false;
26                 });
27                 // alert($("#CheckedAll")[0]);    
28                 // alert($("#CheckedAll")[0].getAttribute("checked"));
29                 //此处使用attract()方法,在IE中和在chrome中均不能实现预期,需要修改为prop()方法    
30                 // $("#CheckedAll").attr("checked",flag);            
31                 $("#CheckedAll").prop("checked",flag);
32                 // alert($("#CheckedAll").prop("checked"));//使用attr()时,返回undifined
33             });
34 
35             $("#CheckedRev").click(function(){
36                 $("[name=items]:checkbox").each(function(){
37                     // $(this).prop("checked",!$(this).attr("checked"));
38                     this.checked=!this.checked;
39                 });
40             });
41             $("#send").click(function(){
42                 var str="你选中的是:\r\n";
43                 $("[name=items]:checkbox").each(function(){
44                     if(this.checked)
45                         str+=$(this).val()+"\r\n";
46                 });
47                 alert(str);
48             });
49         })
50     </script>
51 </head>
52 <body>
53     <form>
54         你爱好的运动是?<input type="checkbox" id="CheckedAll" value="全选/全不选" />全选/全不选<br/>
55         <input type="checkbox" name="items" value="足球"/>足球
56         <input type="checkbox" name="items" value="篮球"/>篮球
57         <input type="checkbox" name="items" value="羽毛球"/>羽毛球
58         <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>        
59         <input type="button" id="CheckedRev" value="反选"/>
60         <input type="button" id="send" value="提交"/>
61     </form>
62 </body>
63 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>复选框应用</title>
 5     <style type="text/css">
 6         form{
 7             border:1px solid #ccc;
 8             width:500px;
 9             padding:10px;
10             margin:auto;
11             font-size:20px;
12         }    
13     </style>
14     <script type="text/javascript" src="../jquery-3.4.1.js"></script>
15     <script type="text/javascript">
16         $(function(){
17             $("#CheckedAll").click(function(){
18                 $("[name=items]:checkbox").prop("checked",this.checked);                                
19             });
20             
21             $("[name=items]:checkbox").click(function(){
22                 var flag=true;
23                 $("[name=items]:checkbox").each(function(){
24                     if(!this.checked)
25                         flag=false;
26                 });
27                 // alert($("#CheckedAll")[0]);    
28                 // alert($("#CheckedAll")[0].getAttribute("checked"));
29                 //此处使用attract()方法,在IE中和在chrome中均不能实现预期,需要修改为prop()方法    
30                 // $("#CheckedAll").attr("checked",flag);            
31                 $("#CheckedAll").prop("checked",flag);
32                 // alert($("#CheckedAll").prop("checked"));//使用attr()时,返回undifined
33             });
34 
35             $("#CheckedRev").click(function(){
36                 $("[name=items]:checkbox").each(function(){
37                     // $(this).prop("checked",!$(this).attr("checked"));
38                     this.checked=!this.checked;
39                 });
40             });
41             $("#send").click(function(){
42                 var str="你选中的是:\r\n";
43                 $("[name=items]:checkbox").each(function(){
44                     if(this.checked)
45                         str+=$(this).val()+"\r\n";
46                 });
47                 alert(str);
48             });
49         })
50     </script>
51 </head>
52 <body>
53     <form>
54         你爱好的运动是?<input type="checkbox" id="CheckedAll" value="全选/全不选" />全选/全不选<br/>
55         <input type="checkbox" name="items" value="足球"/>足球
56         <input type="checkbox" name="items" value="篮球"/>篮球
57         <input type="checkbox" name="items" value="羽毛球"/>羽毛球
58         <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>        
59         <input type="button" id="CheckedRev" value="反选"/>
60         <input type="button" id="send" value="提交"/>
61     </form>
62 </body>
63 </html>

1 2 3 4 5 6 form{
7 border:1px solid #ccc;
8 width:500px;
9 padding:10px;
10 margin:auto;
11size:20px;
12 }
13141516function(){
17function(){
18this.checked);
19 });
2021function(){
22vartrue;
23function(){
24ifthis.checked)
25false;
26 });
27// alert($(“#CheckedAll”)[0]); 28// alert($(“#CheckedAll”)[0].getAttribute(“checked”));29//此处使用attract()方法,在IE中和在chrome中均不能实现预期,需要修改为prop()方法 30// $(“#CheckedAll”).attr(“checked”,flag); 31,flag);
32// alert($(“#CheckedAll”).prop(“checked”));//使用attr()时,返回undifined33 });
3435function(){
36function(){
37// $(this).prop(“checked”,!$(this).attr(“checked”));38thisthis.checked;
39 });
40 });
41function(){
42var;
43function(){
44ifthis.checked)
45this;
46 });
47 alert(str);
48 });
49 })
5051525354555657585960616263

 

» 本文来自:前端开发者 » 《jQuery——复选框操作_靑祠_前端开发者》
» 本文链接地址:https://www.rokub.com/73347.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!