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>

以下代码同样使用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>

 

posted @ 2019-09-24 15:58 用脑袋行走的人 阅读(...) 评论(...) 编辑 收藏