首页 > Web开发 > 详细

Jquery 利用单个复选款(checkbox)实现全选、反选

时间:2014-05-08 14:24:00      阅读:410      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣

 1 <script type="text/javascript">
 2  $(function(){
 3      //全选
 4      $("#CheckedAll").click(function(){

 5          $([name=items]:checkbox).attr("checked", this.checked );
 6      });
 7      $([name=items]:checkbox).click(function(){
 8          //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
 9          var $tmp=$([name=items]:checkbox);
10          //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
11          $(#CheckedAll).attr(checked, $tmp.length==$tmp.filter(:checked).length);
12      });
13 
14      //输出值
15      $("#send").click(function(){
16         var str="你选中的是:\r\n";
17         $([name=items]:checkbox:checked).each(function(){
18             str+=$(this).val()+"\r\n";
19         })
20         alert(str);
21      });
22   });
23   </script>
24 </head>
25 
26 <body>
27 <form method="post" action="">
28     <b>你爱好的运动是?</b><br/>
29     <input type="checkbox" id="CheckedAll" />全选/全不选<br/>
30     <input type="checkbox" name="items" value="足球"/>足球
31     <input type="checkbox" name="items" value="篮球"/>篮球
32     <input type="checkbox" name="items" value="羽毛球"/>羽毛球
33     <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
34     <input type="button" id="send" value="提 交"/> 
35 </form>
36 
37 </body>
bubuko.com,布布扣

 

Jquery 利用单个复选款(checkbox)实现全选、反选,布布扣,bubuko.com

Jquery 利用单个复选款(checkbox)实现全选、反选

原文:http://www.cnblogs.com/infozr/p/3713821.html

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