复选框change事件未触发，需绑定到原生input[type="checkbox"]而非.layui-form-checkbox；应使用form.on('checkbox(filterName)')监听，并通过form.val()更新关联字段值以确保Layui状态同步。
复选框 change 事件没触发？检查是否绑在了 input[type="checkbox"] 上
很多人直接给 .layui-form-checkbox（layui 渲染后的外层 div）绑定事件，结果 click 或 change 都不生效。layui 的复选框是用原生 input[type="checkbox"] 隐藏后、靠 js 模拟 ui，真正响应事件的是那个被隐藏的原生 input。
正确做法：用委托或直接选中原生 input。推荐用 form.on('checkbox(filterName)') —— 这是 Layui 表单模块内置的监听方式，比手动绑 change 更可靠，且兼容重渲染。
- 确保复选框有
lay-filter="xxx"属性，比如lay-filter="agree" - 在
layui.use(['form'], function(){...})内调用form.on('checkbox(agree)', function(data){...}) -
data.elem是原生 checkbox 元素，data.value是其value值（未勾选时为undefined），data.checked是布尔值，更直观
怎么改另一个 input 的值？别直接操作 DOM，用 form.val()
手动用 document.getElementById().value = ... 或 $().val(...) 改值，Layui 表单校验、联动更新可能失效——因为 Layui 不知道这个值变了，不会同步更新内部状态或重新校验。
必须走 Layui 的表单值管理 API：form.val()。它会自动触发视图更新、校验重算，并兼容动态添加的表单项。
- 假设目标 input 的
name="phone"，且整个表单lay-filter="demoForm" - 在 checkbox 回调里写：
form.val('demoForm', {phone: data.checked ? '13800138000' : ''}); - 如果只是单个字段，也可以只传对象键值对，不用全量；但注意 name 必须和表单内一致（支持点号嵌套如
user.tel）
多个复选框共用一个联动逻辑？用 data.name 区分来源
当页面有多个 checkbox（比如“同意协议 A”、“同意协议 B”）都要影响同一个 input，不能硬编码判断 filter 名——那样会耦合、难维护。
Layui 的 form.on('checkbox(*)') 可监听所有复选框，再通过 data.name 或 data.elem.name 获取具体字段名，统一处理。
- 给每个 checkbox 加上
name="agreement_a"、name="agreement_b" - 监听
form.on('checkbox(*)', function(data){...}) - 在回调里判断：
if (['agreement_a', 'agreement_b'].includes(data.name) && data.checked)，再决定是否设值 - 避免重复赋值：可加个标志位，或统一收集所有 agreement 的勾选状态再计算最终值
值改了但 UI 没刷新？检查目标 input 是否被 layui-form-text 或其他 class 干扰
有时 form.val() 执行成功，但 input 文本没变，常见原因是目标元素被 Layui 的某些 class（比如 layui-form-text）包裹，或者本身是 textarea / select 等非标准 input。
确认三点：
- 目标元素必须有
name属性，且与form.val()中传入的 key 一致 - 如果是
textarea，form.val()同样适用；但如果是自定义组件（如日期选择器、富文本），就不能靠form.val()，得调对应组件的 API - 检查浏览器控制台有没有
layui.form.render()报错，或目标元素是否在表单初始化之后才动态插入——后者需手动调用form.render()
最常被忽略的是：目标 input 如果加了 readonly 或 disabled，form.val() 虽然能设值，但用户看不到变化。得提前清除这些属性，或用 elem.removeAttribute('readonly') 配合。
