全选和全不选

通过jQuery我们还可以给一些checkbox添加全选和全不选的属性，代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7 
 8         </style>
 9         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11             $(function(){  //首先还是记得一定要全部写在这个函数里面
12                 $("#selectBtn").click(function(){   //然后给它添加点击函数
13                     $("tbody input[name='select']").prop("checked",this.checked); //这个this代表当前selectBtn元素
14                 });  //通过这个prop属性设置是否全部点击（这里可以查阅jQuery文档）
15             });
16         </script>
17     </head>
18     <body>
19         <table id="mytable" border="1" cellpadding="" cellspacing="">
20             <thead>
21                 <tr><td><input type="checkbox" id="selectBtn"/></td><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
22             </thead>
23             <tbody>
24                 <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
25                 <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
26                 <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
27                 <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
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                 <tr><td><input type="checkbox" name="select" /></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
39             </tbody>
40             <tfoot>
41                 
42             </tfoot>
43         </table>
44     </body>
45 </html>

 

 相应的API文档：

 

posted @ 2021-02-15 13:00  EvanTheBoy  阅读(146)  评论(0)    收藏  举报