radio组required失效的真正原因是同名组中存在任意checked项（含隐藏空值项）即被浏览器判定为已填写；须彻底删除所有隐藏默认选中项、确保初始无checked、name严格统一、服务端按单值接收、JS用checkValidity()主动校验。
required 属性失效的真正原因
表单提交时 radio 组仍能空提交，不是 required 写错了，而是浏览器检测到同名组里有任意一个 checked 项就判定“已填写”——哪怕那个项是 style="display: none;" 且 value="" 的隐藏默认项。
常见错误结构：
<input type="radio" name="q1" value="" checked style="display:none;"> <input type="radio" name="q1" value="yes"> <input type="radio" name="q1" value="no">
只要第一项存在并 checked，浏览器就跳过验证。这不是 bug，是规范行为。
- 彻底删除所有隐藏的、
value=""的默认选中项 - 确保整组 radio 初始状态无任何
checked（包括不可见项） - 不要用
defaultChecked——HTML 原生只认checked这个布尔属性
name 属性必须严格一致且不可动态生成
radio 组互斥靠的是 name 值完全相同，而不是靠 type="radio"。name 不一致或带索引/时间戳，会导致逻辑断裂。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 写死统一值，如
name="survey_q3"，别用name="q3_1698723456" - 服务端接收时只拿到一个
value，后端字段必须设计为单值（不能当数组收） - JS 获取选中值必须用
document.querySelector('input[name="survey_q3"]:checked')?.value，注意可选链和空值判断
动态设置默认选中要清空再赋值
如果 JS 需在加载后自动选中某一项（比如回显编辑态），不能直接设 .checked = true，否则可能残留旧选中项。
- 先清除同名组所有项：
document.querySelectorAll('input[name="survey_q3"]').forEach(i => i.checked = false) - 再设目标项：
document.querySelector('input[value="maybe"]').checked = true - 避免用
click()模拟点击——它可能触发隐藏元素，或与 CSS 可见性逻辑冲突
提交前用 checkValidity() 主动校验更可靠
依赖浏览器原生弹窗提示不够稳定，尤其在 JS 提交或自定义流程中。主动调用 checkValidity() 能提前捕获问题。
- 在
form.addEventListener('submit', e => { ... })中第一行加：if (!e.target.checkValidity()) return e.preventDefault(); - 对单个 radio 组单独校验：
document.querySelector('input[name="survey_q3"]').closest('div').checkValidity()（需包裹在fieldset或带required的容器内） - 注意：
checkValidity()返回false时，浏览器会自动高亮该组——这是预期副作用，不是错误
最容易被忽略的是：即使按钮被 disabled，只要用户调用 form.submit()，校验依然会执行。真正的空值防护不在 UI 层，而在 name 分组是否干净、initial state 是否为空、以及 submit 事件里是否做了主动拦截。
