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

实现该功能的总的代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>jQuery实现全选与全不选功能</title>
         <script src="js/jquery-3.3.1.js"></script>
         <script>
             $(function(){

             $("#selectBtn").click(function(){
                 console.log($("#selectBtn"));//selectBtn对应的jQuery对象
                 console.log(this);//selectBtn对应的DOM对象

                 $("tbody input[name='select']").prop("checked",this.checked);//监测在tbody标签下input名为select的是否被勾选
                 console.log(this.checked);

             });

             })
         </script>
     </head>
     <body>
         <table border="1">
             <thead><tr><th><input type="checkbox"  id="selectBtn"/> </th><th>付款方式 </th><th>结算方式 </th><th> 状态</th></tr></thead><!--表头-->
             <tbody>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
                 <tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
             </tbody><!--内容-->

              </table>
     </body>
 </html>

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