layui单选框默认不支持点击取消，因基于原生radio且未覆盖其标准行为；需手动监听click事件，检测已选中则设checked=false并调用form.render('radio', filter)同步ui与状态。
layui 单选框默认不支持点击取消
layui 的 radio 组件基于原生 <input type="radio"> 实现，而原生 radio 一旦选中就无法通过再次点击取消——这是浏览器标准行为，layui 并未覆盖该逻辑。所以你直接用 layui.use('form') 渲染的单选组，点击已选项不会触发任何状态变化。
想实现“点击已选项取消”，必须手动接管 click 事件
核心思路是：监听 radio 的 click，检测当前是否已选中；如果是，就调用 form.render() 前将该 radio 的 checked 设为 false，再触发表单重渲染。注意不能只改 DOM，否则 layui 的内部状态（form.data）不同步。
- 必须在
form.on('radio(...)外额外绑定原生click事件，因为 layui 的监听只响应“选中切换”，不响应“重复点击” - 修改
input.checked = false后，务必立即调用form.render('radio')，否则 UI 不更新、且后续form.val()仍返回旧值 - 避免对整个 form 调用
form.render()，性能差，还可能干扰其他组件（如 checkbox、select）
// 示例：给 name="sex" 的 radio 组启用点击取消
document.querySelectorAll('input[name="sex"]').forEach(radio => {
radio.addEventListener('click', function(e) {
if (this.checked) {
this.checked = false;
layui.form.render('radio', 'your-form-filter'); // 第二个参数是 form 的 lay-filter 值
}
});
});
使用时要注意 name 和 lay-filter 的作用域冲突
layui 表单校验和取值依赖 name，而渲染控制依赖 lay-filter。如果你在一个 form 内有多个 radio 组（比如 name="type" 和 name="status"），但共用同一个 lay-filter，那么调用 form.render('radio', 'xxx') 会重绘所有 radio，可能误清其他组的状态。
- 推荐每个 radio 组单独配一个
lay-filter，例如lay-filter="radio-sex"、lay-filter="radio-type" - 对应地，事件监听也按
lay-filter分组处理，避免全局污染 - 如果用
form.val('filter', {name: value})设置值，它不会触发 click，也不会自动取消已有项——这点和用户手动点击行为不一致，需额外兼容
移动端点击区域小，建议加点击反馈或扩大热区
纯 radio 的默认点击区域很小，尤其在手机上容易点不中，用户会误以为“取消失效”。layui 默认没做增强，需要自己补。
- 不要只给
input加事件，而是包裹它的label或自定义容器（layui 生成的结构里通常有layui-form-radio类的外层 div） - 可给 label 添加
cursor: pointer和足够 padding，或用::after伪元素扩大点击范围 - 取消操作后建议短暂视觉反馈（如加个 class 切换背景色），否则用户不确定是否生效
真正难的不是加一行 checked = false，而是让这个“反直觉操作”在各种场景下（动态增删、异步加载、多 filter 共存、form.val 设置后）都保持状态一致。别漏掉 render 和事件绑定的时机问题——比如 DOM 还没插入就去 querySelectorAll，或者 form 模块还没加载完成就调 layui.form。
