layui radio 必须用 form.on('radio(filterName)') 监听,不能用原生 click/change;需统一 name、设置 lay-filter,且确保 layui.use(['form']) 已加载;data.value 为唯一可信选中值,字符串类型;隐藏带验证的元素需动态移除 lay-verify 并调用 form.render('input')。

form.on('radio(filterName)') 是唯一可靠监听方式
layui 的 radio 不能用原生 click 或 change 直接监听,必须走 form.on() 事件系统。否则会漏触发、不响应、或在表单重载后失效。关键前提是:所有 input[type="radio"] 必须有相同的 name 属性,且至少一个带 lay-filter="xxx",然后在 JS 中用 form.on('radio(xxx)', ...) 绑定。
常见错误现象:
- 写了
$('#myRadio').on('click', ...)—— 完全无效,layui 已接管 DOM 事件 -
lay-filter值和form.on()里写的不一致(比如 HTML 写lay-filter="boxNume",JS 写form.on('radio(boxNum))—— 事件根本不会进回调 - 没调用
layui.use(['form'], ...)就直接写form.on—— 报错form is not defined
data.value 判断选中值,别用 this.checked
form.on('radio(...)' 回调的 data 对象里,data.value 是当前被选中的 radio 的 value 字符串,这是唯一可信来源。不要读 data.elem.checked 或 this.checked,因为 layui 在内部模拟点击时可能尚未同步原生状态,容易误判。
典型用法示例:
form.on('radio(boxNume)', function(data) {
if (data.value === '0') {
$('#boxN').hide();
} else if (data.value === '1') {
$('#boxN').show();
}
});
注意点:
-
data.value永远是字符串,即使 HTML 里写value=1,JS 里拿到的也是"1",比较务必用===或==,别用=== 1 - 如果多个 radio 共享同一
name但不同lay-filter,事件不会交叉触发 —— 这是设计使然,不是 bug - 初始选中项(
checked)不会自动触发form.on,如需初始化逻辑,请单独执行一次显示/隐藏
DOM 操作前先确保元素存在且未被 form.render 覆盖
layui 表单控件(如 input[lay-affix]、select)在 form.render() 后会被包裹一层 DOM 结构,直接对原始 input 的父级 div 调用 show()/hide() 通常没问题,但若该 div 本身是 layui 自动生成的容器(比如 .layui-form-item),要小心样式冲突。
建议做法:
- 给要控制显隐的区块加明确
id(如id="boxN"),不要依赖 class 或层级定位 - 避免对
.layui-input-block等 layui 内部 class 直接操作,容易被后续form.render()重置 - 如果目标区块内含 layui 表单元素(如
input、select),在show()后建议调用form.render('select')或form.render('input')确保渲染一致
隐藏后提交表单仍校验?记得关掉 lay-verify
如果被隐藏的区块里有带 lay-verify="required" 的输入框,即使 display: none,Layui 默认仍会校验它 —— 这是高频踩坑点。解决方法不是删 DOM,而是动态开关验证规则:
form.on('radio(boxNume)', function(data) {
var $targetInput = $('#boxNume_s, #boxNume_e');
if (data.value === '1') {
$targetInput.attr('lay-verify', 'required');
$('#boxN').show();
} else {
$targetInput.removeAttr('lay-verify');
$('#boxN').hide();
}
form.render('input'); // 必须调用,否则新 lay-verify 不生效
});
关键细节:
-
removeAttr('lay-verify')比设为空字符串更稳妥,避免残留空规则 -
form.render('input')必须紧跟在属性修改之后,否则提交时还是按旧规则校验 - 如果目标 input 是
type="hidden",Layui 会跳过校验,得临时改成type="text"并style="display:none"
form.render() 的粒度控制。全局调用 form.render() 可能重绘整个表单,影响性能;只传具体类型(如 'input'、'select')才能精准刷新,又不破坏其他区域状态。


















