首页 > Web开发 > 详细

jQuery实现全选与全不选功能

时间:2019-03-17 11:36:54      阅读:188      评论:0      收藏:0      [点我收藏+]

初始时:

技术分享图片

实现功能后:

 

技术分享图片

 

 

实现该功能的核心代码:

<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

 

jQuery实现全选与全不选功能

原文:https://www.cnblogs.com/jiguiyan/p/10546006.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!