<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框的全选和全不选</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript"> //$(function(){})等同于$(document).ready(); $(function(){ //1、为上面的复选框绑定单击事件 $("#selectAll").click(function(){ if (this.checked==true) { //若是上面的复选框被选中 $("input[name='ids']").prop("checked",true); } else{ //上面的复选框没能被选中 $("input[name='ids']").prop("checked",false); } //$("input[name='ids']").prop("checked",this.checked); }); //反向选择 $("#btn3").click(function(){ $("input[name='ids']").each(function(){ $(this).prop('checked',!$(this).prop('checked')); }); }); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" cellspacing="0" cellpadding="5"> <tr> <th><input type="checkbox" id="selectAll"/>全选/<a href="javascript:void(0)" id="btn3">反选</a></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids"/></td> <td>0001</td> <td>张三</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name="ids"/></td> <td>0002</td> <td>李四</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name="ids"/></td> <td>0003</td> <td>王五</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name="ids"/></td> <td>0004</td> <td>赵六</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name="ids"/></td> <td>0005</td> <td>田七</td> <td>18</td> </tr> <tr> <td><input type="checkbox" name="ids"/></td> <td>0006</td> <td>老八</td> <td>18</td> </tr> </tbody> </table> </body> </html>