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>