首页 > 代码库 > Jquery 利用单个复选款（checkbox）实现全选、反选

Jquery 利用单个复选款（checkbox）实现全选、反选

2024-07-03 09:00:28   225人阅读


 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=http://www.mamicode.com/"足球"/>足球
31     <input type="checkbox" name="items" value=http://www.mamicode.com/"篮球"/>篮球
32     <input type="checkbox" name="items" value=http://www.mamicode.com/"羽毛球"/>羽毛球
33     <input type="checkbox" name="items" value=http://www.mamicode.com/"乒乓球"/>乒乓球<br/>
34     <input type="button" id="send" value=http://www.mamicode.com/"提　交"/> 
35 </form>
36 
37 </body>

 


联系
我们