应使用事件委托绑定到tbody，监听tr点击并过滤表头、工具栏、禁用行及复选框自身，调用table.checkRow或触发checkbox change事件确保状态同步，同时适配固定列和移动端热区。
点击整行触发 checkbox 选中，但不干扰其他交互
默认情况下，layui 表格的复选框只响应 click 自身区域，而用户常希望点任意一行（比如文字、空白处）都能选中该行对应复选框。这需要手动绑定事件并模拟点击行为，但要注意避开表头、操作列和已禁用的行。
- 不要直接给
tr绑click，否则会和 Layui 内部的排序、分页、工具栏等事件冲突 - 推荐监听表格容器的
tbody，用事件委托 +event.target判断是否点击在可选行上 - 需排除
.layui-table-col-set（列设置）、.layui-table-tool（工具栏）、th和禁用行（如data-disabled="true"） - 触发前先调用
layui.table.checkRow或手动设置input[type=checkbox]的checked状态，再触发change事件，确保 Layui 的选中状态同步
layui.table.checkRow 与原生 checkbox 操作的区别
Layui 1.x 的 table.checkRow 是官方提供的 API，用于程序化选中某行，但它依赖于表格实例 ID 和数据索引，而实际 DOM 中复选框是渲染后的 input 元素。两者不完全等价：
-
table.checkRow(tableId, index)：适合已知数据索引时调用，会自动更新勾选状态和data-checked属性，但要求表格已初始化且索引有效 - 直接操作
input[type=checkbox]：更底层，兼容性更好，但需手动触发change并更新data-checked，否则table.checkStatus获取不到结果 - 若表格启用了
id字段映射（如id: 'id'），优先用checkRow；否则建议用 DOM 方式，避免索引错位（如分页、搜索后）
避免重复触发和状态不同步的典型写法
常见错误是点击一次触发两次选中/取消，或点击后 UI 变了但 table.checkStatus 返回空数组。核心在于事件冒泡控制和状态同步时机：
layui.use(['table'], function(){
var table = layui.table;
var $ = layui.$;
// 假设表格容器 class="demo-table"
$('.demo-table tbody').on('click', 'tr', function(e){
var $tr = $(this);
var $checkbox = $tr.find('input[type="checkbox"]');
// 排除表头、工具栏、禁用行
if ($tr.closest('thead, .layui-table-tool').length ||
$tr.attr('data-disabled') === 'true' ||
e.target.tagName === 'BUTTON' || e.target.tagName === 'A') {
return;
}
// 阻止 checkbox 默认行为被多次触发
if (e.target.type === 'checkbox') return;
var isChecked = $checkbox.prop('checked');
$checkbox.prop('checked', !isChecked).trigger('change');
});
});
-
e.target.type === 'checkbox'这句必须加，否则点击复选框本身会先执行原生逻辑，再进委托逻辑，导致状态翻转两次 -
trigger('change')不可省略，否则 Layui 不感知变化，checkStatus拿不到结果 - 如果表格有固定列（
fixed: 'left'），需额外监听.layui-table-fixed-l tbody，因为固定列 DOM 是分离的
移动端点击区域小，如何扩大可点击范围
手机端手指点击容易偏移，单纯靠 tr 区域不够。Layui 表格行默认 padding 很小，可安全增强：
- 给
td加padding: 12px 16px（注意不要影响表头高度） - 用
::after伪元素扩展点击热区：对tr设置position: relative，再用tr::after { content: ''; position: absolute; top: -8px; bottom: -8px; left: -16px; right: -16px; } - 避免给
tr直接设padding，会导致表格线错位；伪元素方式更稳妥 - 测试时务必用真机检查，Chrome 模拟器的点击行为和真实触摸有差异
这个功能看似简单，但真正跑通要同时处理好事件委托边界、Layui 内部状态同步、移动端适配和固定列兼容——漏掉任一环都会出现“看起来点了，但没选中”或“点一次变两次”的问题。
