Layui Table 全选与反选功能实现详解

作者：清欢

时间：2026-10-22

本文介绍如何在 Layui 框架中实现表格的全选与反选功能。通过引入 layui.css 和 layui.js，结合 HTML 结构定义表头与表体复选框，并利用 form.on 监听事件，实现总选开关与单项选择的自动联动逻辑。当所有子项被选中时，总选框自动勾选，反之则取消，确保数据交互状态同步。

文章目录

环境依赖与前置准备

首先，确保项目中已正确引入 layui.css 和 layui.js 文件，这是实现后续功能的基础依赖。

HTML 表格结构搭建

接下来，构建 HTML 页面结构，定义包含复选框的表格布局。


<div class="layui-form">
<table class="layui-table">
  <thead>
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
      </td>
      <td>ID</td>
      <td>角色名</td>
      <td>唯一标识</td>
      <td>状态</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody class="role_list">
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
      </td>
      <td>1</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>
</div>

JavaScript 交互逻辑实现

随后，编写 JavaScript 代码以处理复选框的交互逻辑。


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');
});
form.on('checkbox(itemChoose)',function(data){
  var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
  var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
  if(sib == total){
    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);
    form.render();
  }else{
    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
    form.render();
  }
});