欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery——复选框操作

程序员文章站 2022-12-21 16:48:03
学习jQuer对表单、表格操作的过程中，按照书上的例子发现一个问题： 以下代码同样使用prop()函数，使用attr()方法也不能实现预期 ......

学习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>

 

上一篇： django数据库迁移时候异常

下一篇： 系统架构设计师视频教程免费下载

推荐阅读