jQ学习之实现全选全不选操作

一：比较简单 详细说明都在注释里了，还是要灵活掌握选择器的使用

需要注意的是：attr属性只在jq1.8.3即以下版本有效，如果要在更高版本使用 要是用prop方法

html代码：

 1         <table border="1px solid" cellspacing="0px" bordercolor="red" width="500px" align="center" style="text-align: center;">
 2             <thead>
 3                 <th>点击右侧实现全选/全不选</th>
 4                 <th>
 5                     <input type="checkbox"/>
 6                 </th>
 7             </thead>
 8             <tbody>
 9                 <tr>
10                     <td>
11                         张三
12                     </td>
13                     <td>
14                         <input type="checkbox" name="c1" />
15                     </td>
16                 </tr>
17                 <tr>
18                     <td>
19                         李四
20                     </td>
21                     <td>
22                         <input type="checkbox" name="c1" />
23                     </td>
24                 </tr>
25             </tbody>
26         </table>

 

jQ代码

 

1     //先定义页面加载函数
2             $(function(){
3                 $("thead input").click(function(){
4                     //根据总check框和子check框的状态总是一致的这一特性来进行实现
5                     //this代表的是当前操作的标签 this.checked也可以用比较麻烦的获取IsAll的相关属性进行替代
6                     //$("tbody input").attr("checked",this.checked);
                      $("tbody input").prop("checked",this.checked);
});

 

posted @ 2019-07-14 23:27  我叫张小凡  阅读(349)  评论(0)  编辑  收藏  举报