选中数据表页面上的所有复选框
问题描述 投票：0回答：1
我有以下数据表，我需要选中/取消选中所有页面上的所有复选框。我怎样才能做到这一点？另外，只是复选框而不是整行。
我无法使用 fnGetNodes，因为它已被弃用。
var table = new DataTable('#example', {
responsive: true,
"lengthMenu": [20, 40, 60, 80, 100],
"pageLength": 10
});
完整 HTML :
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/2.0.2/js/dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/2.0.2/css/dataTables.dataTables.min.css">
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" name='all' id="checkAll"> All</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="1"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="2"></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="3" checked></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="4"></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="5"></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="6"></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012-12-02</td>
<td>$372,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="7"></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012-08-06</td>
<td>$137,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="8"></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010-10-14</td>
<td>$327,900</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="9"></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009-09-15</td>
<td>$205,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="10"></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008-12-13</td>
<td>$103,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="11"></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008-12-19</td>
<td>$90,560</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="12"></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013-03-03</td>
<td>$342,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="13"></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008-10-16</td>
<td>$470,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="14"></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012-12-18</td>
<td>$313,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="15"></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010-03-17</td>
<td>$385,750</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="16"></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012-11-27</td>
<td>$198,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="17"></td>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010-06-09</td>
<td>$725,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="18"></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009-04-10</td>
<td>$237,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="19"></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012-10-13</td>
<td>$132,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="20"></td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012-09-26</td>
<td>$217,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="21"></td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011-09-03</td>
<td>$345,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="22"></td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009-06-25</td>
<td>$675,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="23"></td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011-12-12</td>
<td>$106,450</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="24" checked></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010-09-20</td>
<td>$85,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="25"></td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009-10-09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="26"></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010-12-22</td>
<td>$92,575</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="27"></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010-11-14</td>
<td>$357,650</td>
</tr>
</tbody>
</table>
<br/>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var table = new DataTable('#example', {
responsive: true,
"lengthMenu": [20, 40, 60, 80, 100],
"pageLength": 10
});
// check / uncheck all somehow?
});
</script>
</body>
</html>
1个回答
0
投票
投票
这有效。来源：https://live.datatables.net/mutavegi/6/edit
var table = new DataTable('#example', {
responsive: true,
"lengthMenu": [20, 40, 60, 80, 100],
"pageLength": 10
});
$('#checkAll').on('change', function(){
var checked = $(this).prop('checked');
table.cells(null, 0).every(function(){
var cell = this.node();
$(cell).find('input[type="checkbox"][name="employeeID"]').prop('checked', checked);
});
});
最新问题
- 如何在 NGINX 中从不同位置提供静态文件
- 无法运行我的应用程序它不断崩溃（android.content.ActivityNotFoundException）
- Spring Boot：无需 ComponentScan 的 Bean 配置
- 如何测试以vararray为输入、SYS_REFCURSOR为输出参数的存储过程？
- Terraform 中的 Azure 容器应用程序部署问题
- 如何通过tcp套接字发送和接收文件
- 如何连续向左滑动多幅图像？
- Webpack 开发服务器将运行时模块包含到入门包中
- 尝试制作一个适用于所有计算机的python exe
- 逻辑应用程序无法从电子邮件附件中提取json
- blobstore.BlobstoreUploadHandler 上传的文件在 request.environ 上不可用
- 底部导航未更改所选按钮
- 基于列体模板的Primereact DataTable过滤
- Wifi密码恢复
- 为什么动态页面在构建（应用程序路由器）期间执行请求？
- jMeter 中电子邮件解析和用户注册的最佳控制器组合是什么
- 通过 ftp 露天导出文件
- 无法使用 EC2 公共 IP 地址启动 Cassandra
- 使用 @ManyToOne JPA 复合键用作 Id 来保存实体会添加额外的参数
- 关于绿脚赛车游戏。当一位演员结束时如何停止游戏
© www.soinside.com 2019 - 2024. All rights reserved.