<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked', true); }); //全不选 $("#CheckedNo").click(function(){ $('[type=checkbox]:checkbox').attr('checked', false); }); //反选 $("#CheckedRev").click(function(){ $('[name=items]:checkbox').each(function(){ //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。 //$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码,简单实用 this.checked=!this.checked; }); }); //输出值 $("#send").click(function(){ var str="你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script> </head> <body> <form action="" method="post"> 你爱好的运动是? <br/> <input type="checkbox" name="items" value="足球"/> 足球 <input type="checkbox" name="items" value="篮球"/> 篮球 <input type="checkbox" name="items" value="羽毛球"/> 羽毛球 <input type="checkbox" name="items" value="乒乓球"/> 乒乓球 <br/> <input type="button" id="CheckedAll" value="全 选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/> </form> </body> </html>
效果图:
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ //全选 $("#CheckedAll").click(function(){ if(this.checked){ //如果当前点击的多选框被选中 $('input[type=checkbox][name=items]').prop("checked", true ); }else{ $('input[type=checkbox][name=items]').prop("checked", false ); } }); //输出值 $("#send").click(function(){ var str="你选中的是:\r\n"; $('input[type=checkbox][name=items]:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script> </head> <body> <form> 你爱好的运动是? <input type="checkbox" id="CheckedAll" /> 全选/全不选<br/> <input type="checkbox" name="items" value="足球"/> 足球 <input type="checkbox" name="items" value="篮球"/> 篮球 <input type="checkbox" name="items" value="羽毛球"/> 羽毛球 <input type="checkbox" name="items" value="乒乓球"/> 乒乓球<br/> <input type="button" id="send" value="提 交"/> </form> </body> </html>
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ //所有checkbox跟着全选的checkbox走。 $('[name=items]:checkbox').prop("checked", this.checked ); }); $('[name=items]:checkbox').click(function(){ //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。 var $tmp=$('[name=items]:checkbox'); //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。 $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length); /* //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。 $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length); */ }); //输出值 $("#send").click(function(){ var str="你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }); </script> </head> <body> <form method="post" action=""> 你爱好的运动是? <input type="checkbox" id="CheckedAll" /> 全选/全不选<br/> <input type="checkbox" name="items" value="足球"/> 足球 <input type="checkbox" name="items" value="篮球"/> 篮球 <input type="checkbox" name="items" value="羽毛球"/> 羽毛球 <input type="checkbox" name="items" value="乒乓球"/> 乒乓球<br/> <input type="button" id="send" value="提 交"/> </form> </body> </html>
效果图: