layui单选框样式被覆盖应避免!important，改用外层唯一class（如.my-form）提高选择器权重并设vertical-align:middle；混用时须统一渲染或手动同步状态；layer弹窗中需在success回调执行form.render()；radio必须置于layui-form内、有name和lay-filter属性且命名规范。
layui单选框被其他CSS覆盖怎么办
直接加 !important 不是好办法，容易引发连锁样式污染。Layui 的单选框（.layui-form-radio）本质是用伪元素 + 复选框隐藏实现的，一旦外部 CSS 重置了 input[type="radio"] 或设置了全局 appearance、margin、padding，就会变形或消失。
真正有效的做法是针对性覆盖，且只作用于 layui 表单容器：
- 在表单外层加唯一 class，比如
<form class="my-form layui-form"></form> - 用更具体的权重写样式：
.my-form .layui-form-radio i而不是泛泛的.layui-form-radio i - 修复常见错位：给
.my-form .layui-form-radio显式设vertical-align: middle，避免和文字基线不齐 - 禁用某些 UI 框架的全局重置（如 Bootstrap 的
input[type="radio"] { appearance: none; }），可在 layui 表单区域用input[type="radio"] { appearance: auto !important; }
layui radio 和自定义 radio 混用时点击失效
如果你在同一个页面里既用了 layui 的 lay-radio，又手动写了原生 <input type="radio">，它们会共用 name，但事件绑定机制不同 —— layui 的 click 是委托到容器上的，而原生 radio 自带表单行为。结果就是：点击原生 radio 无法触发 layui 的 form.on('radio') 监听，反之亦然。
必须统一入口：
- 全部走 layui 渲染：把原生 radio 改成
<input type="radio" name="sex" value="1" lay-filter="sex-filter">，再调用form.render('radio') - 如果必须混用，就放弃监听
form.on('radio')，改用原生change事件，并手动同步 layui 的视觉状态：$(e.target).closest('.layui-form-radio').find('i').addClass('layui-icon-radio').removeClass('layui-icon-circle') - 注意 name 值必须完全一致（包括空格），否则 layui 认为不是同一组
layer 弹窗里 radio 渲染错乱或不显示
layer 弹窗默认用 fixed 定位，而 layui 表单渲染依赖 DOM 可见性与尺寸计算。弹窗内容未完全挂载到文档流前就调用 form.render()，会导致 radio 的伪元素 i 宽高为 0，看起来像“消失了”。
关键时机要卡准：
- 不要在
layer.open({ content: '...' })里直接传字符串然后马上form.render() - 改用
success回调，在弹窗 DOM 真正 append 到 body 后再渲染：success: function(layero){ layui.form.render('radio', 'my-form'); } - 如果弹窗内容来自 ajax 加载，确保
form.render()在数据插入 DOM 之后、且容器已 display:block 之后执行 - 极少数情况需强制重绘：
$('.layui-form-radio').css('opacity', 0.99).css('opacity', 1)触发重排
radio 组内值无法提交或始终为空
不是 JS 逻辑问题，而是表单结构踩坑：layui 的 radio 必须包裹在 <form class="layui-form"></form> 内，且每个 input[type="radio"] 必须有 name 属性，否则 form.val() 拿不到值；更隐蔽的是，如果 radio 被套在 <div> 里又没设 <code>lay-filter，form 模块压根不会扫描它。
检查三要素：
-
<form class="layui-form" lay-filter="demoForm"></form>—— 必须有lay-filter，否则form.on('radio')不生效 -
<input type="radio" name="status" value="1">—— name 不能漏，value 必须是字符串（数字会被转成字符串，但 null/undefined 就真为空） - 不要把 radio 直接塞进
<table> 或 <code><span></span>里，layui 表单只扫描.layui-form下直属或合理嵌套的表单控件最常被忽略的是：radio 的
name值含空格或特殊字符（如user status），导致后端解析失败，应严格使用下划线或中划线命名。
