layui radio 默认不支持点击已选项取消选中，因其严格遵循原生html规范；需通过原生click事件监听、手动清空同name所有radio并调用layui.form.render('radio')实现可取消。
Layui 的 radio 默认不支持点击已选项取消选中——这不是 bug，而是严格遵循原生 HTML 规范。想实现“可取消”，必须手动干预 DOM 状态并触发 UI 同步。
为什么直接点已选 radio 没反应
原生 <input type="radio"> 的设计就是单向锁定：一旦选中，再次点击同组其他项会切换，但点自己不会触发任何状态变化。Layui 完全复用这一行为，form.on('radio') 事件根本不会在点击已选项时触发，所以监听无效。
常见错误现象：
- 绑定 form.on('radio(filter)', ...)，点击已选项控制台无输出
- 手动执行 $('input[name="xxx"]').prop('checked', false)，UI 样式没变（仍是高亮）
正确做法：用原生 click + 手动清空 + render
核心是绕过 Layui 的事件机制，直接捕获点击，判断是否已选中，再主动清除并重绘。
- 只对
.layui-form-radio或其内部<i></i>元素绑定事件，避免误触<label></label>文字区域 - 推荐使用事件委托（尤其表单动态渲染时）：
document.addEventListener('click', ...)或$(document).on('click', '.layui-form-radio', ...) - 判断逻辑必须基于原生
elem.checked，不是data-check这类自定义属性（容易不同步） - 清空后必须调用
layui.form.render('radio')，否则 UI 不更新
简短示例：
document.addEventListener('click', function(e) {
const radioWrap = e.target.closest('.layui-form-radio');
if (!radioWrap) return;
const input = radioWrap.querySelector('input[type="radio"]');
if (input && input.checked) {
// 清除同 name 下所有 radio
document.querySelectorAll(`input[name="${input.name}"]`).forEach(el => el.checked = false);
layui.form.render('radio');
}
});
注意 name 分组和动态渲染场景
同一组 radio 必须共享相同的 name 属性，否则清空逻辑会漏掉目标项。
如果表单是 AJAX 加载或模板重复渲染的，要注意：
- 事件绑定不能写在
layui.use('form', () => { ... })外部立即执行，否则layui.form可能未就绪 - 动态插入的新 radio 节点，需确保事件委托能捕获到（用
document或父容器做代理） - 不要依赖
form.render()全局刷新，应明确传参'radio'，避免影响其他组件
替代方案：改用 checkbox 模拟 radio
如果业务确实强依赖“点击即取消”，且不想处理上述细节，更稳妥的做法是放弃 radio，用 checkbox 模拟单选逻辑：
- 给所有选项加相同
name和lay-skin="primary" - 监听
form.on('checkbox(filter)', data => {...}) - 在回调里遍历同名
input，把当前项设为true，其余设为false - 天然支持点击已选项取消，无需额外判断
这个方案绕开了原生限制，但要注意：它本质是 checkbox，语义上不如 radio 严谨；若需提交数据校验或无障碍访问，得额外补充 aria- 属性。
真正容易被忽略的是：Layui 的 UI 渲染和 DOM 状态是分离的，任何直接操作 checked 属性的行为，如果不配 form.render('radio')，UI 就永远不同步——哪怕你用 jQuery 的 .prop() 或原生赋值，都一样。
