layui单选框change监听无法获取旧值,需在form.render()后立即用form.val()或遍历checked radio缓存旧值;回调中对比data.value与缓存值,并在末尾更新缓存;初始未选中时旧值应为undefined,动态渲染后须重置缓存。

layui单选框监听change时拿不到旧值怎么办
layui的form.on('radio()')事件只传新状态,不带旧值——这是设计使然,不是你代码写错了。要拿到旧值,必须自己存。
怎么在radio切换前缓存旧值
不能等form.on('radio()')触发再存,那时已经切过去了。得在用户点击前就捕获当前选中项:
- 在
form.render()之后,立即用form.val('filter')取一次当前值,存为lastRadioVal - 或者遍历所有同名
input[type=radio],用.checked找当前选中的value,存下来 - 别依赖
document.querySelector('[name="xxx"]:checked')——Layui隐藏了原生radio,DOM状态可能滞后
监听回调里如何比对新旧值
form.on('radio(filter)', function(data)里,data.value是新值,lastRadioVal是旧值,直接比较即可:
form.on('radio(userType)', function(data){
console.log('旧值:', lastRadioVal, '新值:', data.value);
if (lastRadioVal !== data.value) {
// 执行差异逻辑,比如清空关联字段
}
lastRadioVal = data.value; // 立即更新缓存
});
注意:每次回调结束前必须更新lastRadioVal,否则下一次对比就失效;如果表单支持动态渲染(如AJAX重载),记得重置这个变量。
radio未选中时的旧值怎么处理
初始状态可能没任何radio被选中,这时form.val('filter')返回的对象里压根没有该字段,lastRadioVal应初始化为undefined或null:
- 首次调用
form.val('filter')后,检查res.fieldName === undefined,就说明初始无选中 - 后续切换中,
data.value永远有值(因为radio必选其一),所以旧值为undefined就代表“从无到有” - 不要用
== null判断,用=== undefined更准确,避免''或0被误判
真正容易漏掉的是:表单重置或动态插入新radio后,lastRadioVal没同步刷新,导致后续比对全错。











