layui table表头点击全选列复选框的原理是监听th[data-field]点击事件，通过field精准定位该列所有复选框并手动触发click()或设置checked属性，同时调用form.render('checkbox')同步样式与事件。
layui table 表头点击全选列复选框的原理是什么
不是靠 layTable 自带的 checkbox 开关自动联动，而是监听表头 th 的点击事件，手动遍历当前页所有行，触发对应列中 input[type="checkbox"] 的 click() 或设置 checked 属性。Layui 的表格渲染后，复选框不在 thead，而在每行 td 里，且没有统一命名或 class 标识列——所以必须靠列索引（data-field 或列序号）定位。
如何用列索引精准定位并操作该列所有复选框
推荐使用列的 field 值（而非序号），因为列可能被拖拽、隐藏、重排，序号不稳定；field 是你在 cols 配置中定义的唯一标识。关键步骤：
- 在
table.render()的done回调里，给对应th[data-field="xxx"]绑定点击事件 - 用
table.cache["your-id"]获取当前页全部数据，再用table.selectRow()或直接查 DOM 定位到该列td下的input[type="checkbox"] - 避免直接用
$("td:nth-child(n) input[type=checkbox]")，容易跨列错位（尤其有固定列时） - 注意：复选框实际是 Layui 渲染的伪元素，真实
input被隐藏，要操作的是它本身，不是外层div.layui-form-checkbox
示例片段（假设列 field: "status"）：
table.render({
elem: '#demo',
id: 'demo',
cols: [[
{type: 'checkbox'},
{field: 'status', title: '启用', templet: '<input type="checkbox" name="status">'}
]],
done: function(res, curr, count){
// 给 status 列表头绑定全选
$('th[data-field="status"]').on('click', function(){
const checked = $(this).find('input[type="checkbox"]').is(':checked');
// 找到当前页所有 status 列的 checkbox input 元素
$('#demo').next().find('.layui-table-body tbody tr').each(function(){
const cb = $(this).find('td[data-field="status"] input[type="checkbox"]');
if (cb.length) {
cb.prop('checked', !checked);
cb.trigger('click'); // 触发 layui 的 checkbox 事件更新样式
}
});
});
}
});
为什么直接用 form.on("checkbox") 不起作用
因为表头复选框不是由 Layui 的 form.render() 管理的——它只是个普通 input，没加 lay-skin="primary"，也没被 form 模块监听。而表格体内的复选框虽然是 Layui 渲染的，但它们是动态生成的，form.on 默认只监听初始化时已存在的元素。所以必须手动触发 click() 或调用 form.render() 强制重绘，否则样式不同步。
- 不调用
form.render()：复选框 DOM 状态变了，但外层div.layui-form-checkbox的layui-form-checked类没更新 - 不触发
click()：Layui 的 checkbox 事件监听器收不到变更，后续逻辑（如统计选中数）不会响应 - 更稳妥的做法是在操作完所有 checkbox 后，执行
form.render('checkbox')
移动端点击表头区域失效或误触怎么办
表头文字和 padding 区域大，但真正绑定事件的是 th 整体，用户常点在文字上却没触发——因为 th 内部可能嵌了 div 或 span，事件没冒泡上来。解决方法：
- 给
th[data-field]显式设置cursor: pointer和user-select: none，增强可感知性 - 用
$(th).on('click', function(e) {...})并在开头加e.stopPropagation()防止被子元素拦截 - 避免在
templet中给表头加额外input或button，否则点击会优先触发它们 - 真机测试时注意 iOS Safari 对小区域点击的惰性处理，可加
touchstart事件作为兼容补充
这件事真正的复杂点不在代码多长，而在于你得同时盯住三件事：DOM 结构是否稳定、Layui 内部事件是否被正确触发、以及用户实际点中的到底是哪个节点——漏掉任意一个，全选就看起来“有时灵有时不灵”。
