layui全选需同步原生checked属性并调用form.render('checkbox')刷新样式，子项change事件统计勾选数联动全选按钮，异步加载时须在form.render()后绑定事件。
全选按钮绑定 click 事件时，checkbox 的 checked 状态没同步更新
这是最常见的问题：点击“全选”按钮后，页面上复选框的勾选视觉没变，或者部分没响应。Layui 的 checkbox 是用 JS 动态渲染的美化控件，原生 DOM 的 checked 属性改了，但 Layui 的渲染层不知道——必须手动通知它重渲染。
正确做法是：先操作原生 input[type="checkbox"] 的 checked 属性，再调用 form.render('checkbox') 刷新样式。
- 不要只写
$('input[name="select-all"]').prop('checked', true)就完事 - 全选逻辑里一定要跟一句
layui.form.render('checkbox') - 如果页面有多个 checkbox 容器（比如不同
form块），建议加选择器限定范围，避免误刷
如何让“全选”按钮和子项 checkbox 互相联动
用户点全选 → 所有子项打钩；点任意一个子项 → 若全部已勾，则全选按钮也勾上；若取消一个 → 全选按钮自动取消。这个双向同步靠监听 + 条件判断实现。
关键在子项的 change 事件里统计已勾数量：
layui.form.on('checkbox(select-all)', function(data){
const checked = data.elem.checked;
$('input[name="item"]').prop('checked', checked);
layui.form.render('checkbox');
});
$('input[name="item"]').on('change', function(){
const all = $('input[name="item"]').length;
const checked = $('input[name="item"]:checked').length;
$('input[name="select-all"]').prop('checked', all === checked);
layui.form.render('checkbox');
});
注意：name="select-all" 和 name="item" 要对应你 HTML 中的真实 name 值；layui.form.on 绑定的是 Layui 渲染后的事件，而子项 change 用原生 jQuery 监听更可靠。
使用 form.checkbox API 时的兼容性陷阱
Layui 2.8+ 提供了 form.checkbox 方法用于程序化操作 checkbox，但它**不触发 change 事件**，也不自动刷新 UI —— 这点和文档描述容易产生偏差。
- 调用
layui.form.checkbox('val', 'select-all', true)只会设置值，不会打钩视觉 - 仍需搭配
layui.form.render('checkbox')才能生效 - 该 API 在 Layui 2.7 及更早版本中不存在，老项目直接用会报错
undefined is not a function
全选逻辑放在 form.render() 回调里才安全
如果 checkbox 是异步加载（比如从接口拉取数据后动态插入），直接 DOM 操作可能因元素还没被 Layui 处理而失效。
稳妥做法是等 Layui 完成初始化后再绑定事件：
layui.use(['form'], function(){
const form = layui.form;
// 等待渲染完成
form.render();
// 再绑定全选逻辑
form.on('checkbox(select-all)', function(data){ /* ... */ });
});
漏掉这一步，常见现象是：页面加载完，“全选”按钮点了没反应，控制台也没报错——只是事件根本没挂上去。
真正麻烦的不是写几行代码，而是 checkbox 渲染、事件绑定、状态同步这三者时机错位。多检查一遍 form.render() 是否执行、name 是否拼错、jQuery 选择器是否命中目标元素，比反复改逻辑更省时间。
