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>
Jquery 利用单个复选款（checkbox）实现全选、反选