jQuery实现全选与全不选功能

初始时：

实现功能后：

实现该功能的核心代码：

<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>

实现全选与全不选功能.html