首页 > Web开发 > 详细

jQuery——复选框操作

时间:2019-09-24 16:24:54      阅读:68      评论:0      收藏:0      [点我收藏+]

学习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()方法,才可以
17             // $("#CheckedAll").click(function(){
18             //     $("[name=items]:checkbox").attr("checked",true);
19             // });
20             // $("#CheckedNo").click(function(){
21             //     $("[name=items]:checkbox").attr("checked",true);
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>

原因可能跟jQuery封装的函数有关,待后续查找资料

jQuery——复选框操作

原文:https://www.cnblogs.com/planetwithpig/p/11578801.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!