码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-05-08 14:24:45      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

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)实现全选、反选

标签:style   blog   class   code   java   ext   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!