使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能，
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能，相关的知识，希望对你有一定的参考价值。
左上角的复选框，我点击没有用，不能够把下面的都选中，请问大神们，怎么使用Easyui实现这个效果！
jQuery学习——使用JQ完成复选框的全选和全不选
1、在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选
步骤分析：
第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
2、具体代码实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不选</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 <script> 8 $(function(){ 9 $("#select").click(function(){ 10 //获取下面所有的复选框并将其选中状态设置跟编码的前端复选框保持一致 11 //attr的方法与JQ的版本有关，在1.8.3及以下有用 12 //$(".selectOne").attr("checked",this.checked); 13 $(".selectOne").prop("checked",this.checked); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <table border="1" width="500" height="50" align="center" id="tbl" > 20 <thead> 21 <tr> 22 <td colspan="4"> 23 <input type="button" value="添加" /> 24 <input type="button" value="删除" /> 25 </td> 26 </tr> 27 <tr> 28 <th><input type="checkbox" id="select"></th> 29 <th>编号</th> 30 <th>姓名</th> 31 <th>年龄</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr > 36 <td><input type="checkbox" class="selectOne"/></td> 37 <td>1</td> 38 <td>张三</td> 39 <td>22</td> 40 </tr> 41 <tr > 42 <td><input type="checkbox" class="selectOne"/></td> 43 <td>2</td> 44 <td>李四</td> 45 <td>25</td> 46 </tr> 47 <tr > 48 <td><input type="checkbox" class="selectOne"/></td> 49 <td>3</td> 50 <td>王五</td> 51 <td>27</td> 52 </tr> 53 <tr > 54 <td><input type="checkbox" class="selectOne"/></td> 55 <td>4</td> 56 <td>赵六</td> 57 <td>29</td> 58 </tr> 59 <tr > 60 <td><input type="checkbox" class="selectOne"/></td> 61 <td>5</td> 62 <td>田七</td> 63 <td>30</td> 64 </tr> 65 <tr > 66 <td><input type="checkbox" class="selectOne"/></td> 67 <td>6</td> 68 <td>汾九</td> 69 <td>20</td> 70 </tr> 71 </tbody> 72 </table> 73 </body> 74 </html>
注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。
以上是关于使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能，的主要内容，如果未能解决你的问题，请参考以下文章