jQuery实现全选与全不选功能

时间：2023-03-09 08:42:06
jQuery实现全选与全不选功能

初始时：

jQuery实现全选与全不选功能

实现功能后：

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

相关文章