<!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> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ //所有checkbox跟着全选的checkbox走。 $(\'[name=items]:checkbox\').attr("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>