layui表格checkbox全选样式与功能实现
本文介绍如何在layui表格中实现checkbox的全选样式与功能。通过升级至v1.0.9 rls版本,无需设置name值即可适配表格选择操作。需覆盖layui.all.js、form.js及layui.css三个文件,即可轻松完成样式与功能的配置。
layui表格checkbox全选功能实现
在早期版本中,复选框默认需要指定值,通常显示为“勾选”字样,这种设计在表格中进行多选操作时显得不够灵活且修改困难。幸运的是,layui升级后允许不设置name属性,从而更好地适应表格内的选择交互需求。
实现该功能所需的layui版本为v1.0.9 rls,这是当前推荐的最新版本。
<span style="white-space:pre;"> </span><div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="plugins/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript">
var $ = layui.jquery,
form = layui.form();
//全选
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
</script>
若使用的是v1.0.9 rls之前的旧版本,则需要手动更新特定的核心文件以支持新功能。
需要更新的文件包括layui\lay\dest目录下的layui.all.js。
其次是layui\lay\modules目录下的form.js文件。
最后还需更新layui\css目录下的layui.css样式文件。
将上述三个文件从最新版本中复制并覆盖到旧版本对应位置,即可顺利实现checkbox的样式渲染与全选功能。
以上就是layui表格checkbox选择全选样式及功能的完整实现方法,供读者参考,欢迎继续支持本站获取更多技术分享。
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
