Layui表格单元格内如何显示原生的Checkbox而不影响行选中-Layui教程-PHP中文网

应使用templet渲染checkbox并调用event.stoppropagation()阻止冒泡，配合form.on监听状态变化，避免混用行选中与单元格checkbox逻辑，确保数据一致性。

layui表格单元格内如何显示原生的checkbox而不影响行选中

Checkbox 点击时阻止事件冒泡到表格行

默认情况下，Layui 表格的行选中是靠 tr 上的点击事件实现的；而单元格里放原生 <input type="checkbox">，点击它会同时触发 checkbox 自身状态切换和 tr 的 click，导致“点一下勾上，行又立刻被取消选中”或行为错乱。

关键不是改 Layui 源码，而是让 checkbox 的 click 不往上透传：

在 cols 配置里用 templet 渲染 checkbox，并在 onclick 里加 event.stopPropagation()
不要用 layui.form.render('checkbox') 全局重渲染——它会把所有 checkbox 绑定新事件，反而覆盖掉你写的 stopPropagation
如果用了 lay-skin="primary" 等美化样式，注意 Layui 的 checkbox 皮肤是靠伪元素模拟的，原生 checkbox 被隐藏了，此时必须用 Layui 自带的 form.on('checkbox(filter)', ...) 监听，不能直接绑 change

用 form.on 正确监听 checkbox 状态变化

Layui 的表单模块对 checkbox 有专门的事件机制，绕过它直接操作 DOM 或监听 change 容易失效，尤其在表格重载、分页后。

正确做法是给 checkbox 设置 lay-filter 属性，然后统一监听：

form.on('checkbox(table-checkbox)', function(obj){
  console.log(obj.elem); // 当前 checkbox DOM
  console.log(obj.value); // value 值（没设则为 undefined）
  console.log(obj.checked); // 是否选中
});

注意：

obj.elem 是原生 input，可直接读 obj.elem.dataset.id 获取关联行数据 ID
别在回调里调 table.checkRow 或 table.cache 手动同步状态——Layui 表格的「行选中」和「单元格 checkbox」是两套逻辑，混用会导致 UI 和数据不一致
如果需要批量获取所有已勾选的 checkbox 数据，建议维护一个独立的 checkedMap = {} 对象，key 为行 id，value 为布尔值，由 form.on 更新

避免 checkbox 渲染后失去响应（templet + 异步数据场景）

表格用 url 异步加载数据时，templet 函数执行时机早于 Layui 表单模块初始化。结果就是 checkbox 渲染出来了，但没被 form.render() 接管，点击无反应或样式异常。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

解决方案只有两个，且必须二选一：

在 done 回调里手动调一次 form.render('checkbox', 'your-form-filter')，其中第二个参数是包裹表格的 form 元素的 lay-filter 值
放弃 form.render()，全部用原生 checkbox + event.stopPropagation() + 手动维护状态，不依赖 Layui 的表单皮肤（更轻量，也更可控）

常见错误：在 templet 里写 layui.form.render('checkbox') —— 这会重复初始化，且作用域不对，大概率报 Cannot read property 'render' of undefined