首先创建test.html文件，内容如下： 这里用的jQuery版本是jquery-1.8.2.js, 点击下载
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <thead> <tr> <th>状态</th> <th>用户名</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>赵</td> </tr> <tr> <td><input type="checkbox" /></td> <td>钱</td> </tr> <tr> <td><input type="checkbox" /></td> <td>孙</td> </tr> <tr> <td><input type="checkbox" /></td> <td>李</td> </tr> <tr> <td><input type="checkbox" /></td> <td>周</td> </tr> </tbody> <tfoot> <tr> <td> <input type="checkbox" /> 全选 </td> <td> <input type="button" value="全反选" /> </td> </tr> </tfoot> </table> <script type="text/javascript"> //全选中和全取消 //定位tfoot中的全选复选框，同时添加单击事件 $("tfoot input:checkbox").click(function(){ //获取该全选复选框的状态 var flag = this.checked; //如果选中 if(flag){ //将tbody中的所有复选框选中 $("tbody input:checkbox").attr("checked","checked"); //如果未选中 }else{ //将tbody中的所有复选框取消 $("tbody input:checkbox").removeAttr("checked"); } }); </script> <script type="text/javascript"> //全反选 //定位tfoot标签中的全反选按钮，同时添加单击事件 $("tfoot input:button").click(function(){ //将tbody标签中的所有选中的复选框失效 $("tbody input:checkbox:checked").attr("disabled","disabled"); //将tbody标签中的所有生效的复选框选中 $("tbody input:checkbox:enabled").attr("checked","checked"); //将tbody标签中的所有生效的复选框生效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked"); }); </script> </body> </html>源码下载：点我下载源码
