初始时：
实现功能后：
实现该功能的核心代码：
<script> $(function(){ $("#selectBtn").click(function(){ console.log($("#selectBtn"));//selectBtn对应的jQuery对象 console.log(this);//selectBtn对应的DOM对象 $("tbody input[name='select']").prop("checked",this.checked); console.log(this.checked); }); }) </script>
监测在tbody标签下input名为select的是否被勾选：
$("tbody input[name='select']").prop("checked",this.checked);
实现该功能的总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery实现全选与全不选功能</title> 6 <script src="js/jquery-3.3.1.js"></script> 7 <script> 8 $(function(){ 9 10 $("#selectBtn").click(function(){ 11 console.log($("#selectBtn"));//selectBtn对应的jQuery对象 12 console.log(this);//selectBtn对应的DOM对象 13 14 $("tbody input[name='select']").prop("checked",this.checked);//监测在tbody标签下input名为select的是否被勾选 15 console.log(this.checked); 16 17 }); 18 19 20 21 }) 22 </script> 23 </head> 24 <body> 25 <table border="1"> 26 <thead><tr><th><input type="checkbox" id="selectBtn"/> </th><th>付款方式 </th><th>结算方式 </th><th> 状态</th></tr></thead><!--表头--> 27 <tbody> 28 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 29 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 30 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 31 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 32 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 33 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 34 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 35 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 36 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 37 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr> 38 </tbody><!--内容--> 39 40 41 </table> 42 </body> 43 </html>