radio切换时需手动清空input值,因form.on('radio')不自动处理其他控件;应使用form.val()同步更新Layui表单状态,避免直接DOM操作失效。
radio 切换时如何联动清空 input 值
不能靠 form.on('radio(filtername)') 单独监听就完事——它只告诉你哪个 radio 被点,不自动管其他表单控件。必须手动取值、判断、赋空,且要避开 dom 渲染时机问题。
为什么直接 $('#xxx').val('') 有时无效
Layui 的 input、textarea 等控件在 form.render() 后会被包裹一层 DOM,原生 .val() 可能写不进渲染后的实际输入框;更稳妥的做法是:先改原始 DOM 的 value,再调 form.val() 同步到 layui 内部状态。
- 错误写法:
$('#poi_md').val('')(可能失效,尤其在 form.render() 后) - 推荐写法:
form.val('yourFormFilter', { poi_md: '' })(确保双向同步) - 若没设 form filter,可用
layui.$('input[name="poi_md"]').val('').trigger('change')+form.render()
多个 radio 组共用一个清空逻辑怎么写
常见场景:一组故障原因 radio(如“重启”“断电”“无光”),选中任一“是”,就往描述框追加文字;但一旦切换到另一个“是”,前面那个就得从描述里删掉——否则文本越积越多。
- 不要用
replace()硬删,容易误伤(比如“重启”和“重启失败”冲突) - 建议维护一个映射对象:
{ poi_restart: '重启', poi_noelectricity: '断电', poi_nolight: '无光' } - 每次触发 radio 事件时,先清空整个描述框,再把当前所有“是”的项拼进去
- 示例逻辑:
form.on('radio(poi_restart)', function(data) { syncDesc(); });<br>form.on('radio(poi_noelectricity)', function(data) { syncDesc(); });<br>// ...<br>function syncDesc() {<br> let parts = [];<br> if (form.val('yourFormFilter').poi_restart === '1') parts.push('重启');<br> if (form.val('yourFormFilter').poi_noelectricity === '1') parts.push('断电');<br> form.val('yourFormFilter', { poi_md: parts.join(',') });<br>}
Vue + Layui 混合项目里 radio 双向绑定失效怎么办
你写了 v-model,但点击 radio 后 recordTemplateInfo.airway 没变,或者变了但 DOM 不更新——本质是 Vue 和 Layui 的事件系统打架。
- Vue 的
v-model依赖input或change事件,而 Layui 的 radio 是用click模拟的,不会触发 Vue 默认监听的事件 - 解决方案:去掉
v-model,改用@click手动更新 data,并显式调this.$nextTick(() => form.render()) - 更稳做法:完全放弃
v-model,用form.on('radio(xxx)')监听,再通过this.$set(this.recordTemplateInfo, 'airway', data.value)更新 - 注意:别在 click 回调里直接操作
input[type=radio]的checked属性,Layui 会覆盖它











