JQuery 实现复选框 多选，反选
第一种方式：用按钮控制复选框的全选和不全选，如图：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="Script/jquery-1.4.1.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(document).ready(function () { 9 $("#CheckedAll").click(function () { 10 $("[name=items]:checkbox").attr("checked", true); 11 }); 12 $("#CheckedNo").click(function () { 13 $("[name=items]:checkbox").attr("checked", false); 14 }); 15 $("#CheckedRev").click(function(){ 16 $("[name=items]:checkbox").each(function(){ 17 this.checked=!this.checked; 18 }); 19 }); 20 $("#send").click(function(){ 21 var str="你选中的是：\r\n"; 22 $("[name=items]:checkbox:checked").each(function(){ 23 str+=$(this).val()+"\r\n"; 24 }); 25 alert(str); 26 }); 27 28 }); 29 </script> 30 </head> 31 32 <body> 33 <form method="post" action=""> 34 你爱好的运动是？ 35 <br/> 36 <input type="checkbox" name="items" value="足球"/>足球 37 <input type="checkbox" name="items" value="篮球"/>篮球 38 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 39 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 40 <br/> 41 <input type="button" id="CheckedAll" value="全 选"/> 42 <input type="button" id="CheckedNo" value="全不选"/> 43 <input type="button" id="CheckedRev" value="反 选"/> 44 45 <input type="button" id="send" value="提 交"/> 46 </form> 47 </body> 48 </html>
第二种方式：用复选框控制复选框的全选和不全选，如图：
注意：
全选/全不选 的复选框，即复选框组里如果有一个或者更多的没有被选中时，则取消"CheckedAll”的复选框的选中状态；如果复选框组都被选中时，则id为"CheckedAll"的复选框也自动被选中。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="Script/jquery-1.4.1.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 9 $(document).ready(function () { 10 //全选 11 $("#CheckedAll").click(function(){ 12 if(this.checked){ //如果当前点击的多选框被选中 13 $('input[type=checkbox][name=items]').attr("checked", true ); 14 }else{ 15 $('input[type=checkbox][name=items]').attr("checked", false ); 16 } 17 }); 18 $('input[type=checkbox][name=items]').click(function(){ 19 var flag=true; 20 $('input[type=checkbox][name=items]').each(function(){ 21 if(!this.checked){ 22 flag = false; 23 } 24 }); 25 26 if( flag ){ 27 $('#CheckedAll').attr('checked', true ); 28 }else{ 29 $('#CheckedAll').attr('checked', false ); 30 } 31 }); 32 //输出值 33 $("#send").click(function(){ 34 var str="你选中的是：\r\n"; 35 $('input[type=checkbox][name=items]:checked').each(function(){ 36 str+=$(this).val()+"\r\n"; 37 }) 38 alert(str); 39 }); 40 }) 41 </script> 42 </head> 43 44 <body> 45 <form method="post" action=""> 46 你爱好的运动是？ 47 <input type="checkbox" id="CheckedAll" value="全选/全不选"/>全选/全不选 48 <br/> 49 <input type="checkbox" name="items" value="足球"/>足球 50 <input type="checkbox" name="items" value="篮球"/>篮球 51 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 52 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 53 <br/> 54 <input type="button" id="send" value="提 交"/> 55 </form> 56 </body> 57 </html>
