required属性不生效的主因是同名radio组中存在隐藏的checked项、name值大小写或拼写不一致、或被disabled/外挂表单等隔离。需确保初始无checked、name严格统一、DOM中分组正确，并在JS中判空选中元素。
required 属性为什么有时不生效
浏览器对 required 的判断逻辑很直接：只要同名 radio 组中存在任意一个 checked（无论是否隐藏、value 是否为空），就认为该字段“已填写”，跳过校验。常见陷阱是加了 style="display: none;" 或 opacity: 0 的默认选中项，比如：
<input type="radio" name="q1" value="" checked style="display: none;">
它会让整组失去强制选择效果——用户根本看不到选项，却能直接提交。
- 检查 DOM 中所有同名
radio，删掉任何带checked的隐藏项 - 确保初始状态下整组
radio都没有checked属性 - 不要用 CSS 隐藏 +
checked模拟“占位”，这是最典型的漏选放行原因
name 属性拼写和大小写必须完全一致
同一组单选按钮的互斥行为只依赖 name 值严格匹配。哪怕只差一个字母或大小写，浏览器就当它们是两组独立控件，required 也只作用于其中某一个，其余可空着提交。
- 确认所有同组
radio的name值完全相同，例如统一用name="level"，而非混用"Level"或"user_level" - 检查 JavaScript 是否动态修改过
name，比如通过el.name = "new_name"却没同步更新其他同组元素 - 在开发者工具 Elements 面板里手动勾选一个，观察是否只有它出现
checked=""，其它同名项是否自动取消——没取消说明分组失效
表单提交时后端收不到值？先验证这三处
漏选问题常被误判为后端接收失败，其实 90% 是前端配置导致字段压根没发出去。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
radio被包在<fieldset disabled>里：整组不可交互，checked不生效，提交时也不包含该字段 - 用了
form="xxx"外挂表单，但目标<form id="xxx">不存在或尚未加载完成 - 某个
radio的name被 JS 动态清空或设为""，导致浏览器忽略该控件
调试时打开 Network 面板看 Form Data，如果整个 name 键都没出现，说明浏览器根本没把它当作有效表单控件收集。
JS 获取选中值前必须判空
即使加了 required，用户仍可能绕过（比如禁用 JS 后手动删掉 required 属性，或用 curl 提交）。服务端和前端 JS 都不能假设一定有值。
- 用
document.querySelector('input[name="q1"]:checked')获取时，结果可能是null，必须显式判断 - 避免直接读
.value，先检查是否存在：const el = document.querySelector('input[name="q1"]:checked'); if (!el) { /* 提示用户选择 */ } - Form API 提交时，
new FormData(form)对未选中的radio组不会附带任何键值，这点和checkbox不同
真正容易被忽略的是：required 只在原生表单提交时触发 UI 提示，它不阻止 JS 调用 form.submit()，也不影响 fetch 或 axios 手动提交——这些路径下漏选完全静默。
