根本原因是隐藏的checked单选按钮绕过required校验；浏览器仅检查同name下是否存在任意checked项，不区分可见性或用户操作。
单选按钮组提交前没被选中，表单却照常提交——根本原因不是 JS 没写对，而是 required 被隐藏的 checked 项悄悄绕过了。
为什么加了 required 还能空提交？
浏览器校验逻辑只看“同 name 下是否有任意一个 radio 被选中”，不区分是否可见、是否有 value、是否被用户主动点过。只要存在一个带 checked 的隐藏 radio（比如 style="display:none" 或 class="visually-hidden"），哪怕它的 value=""，整个组就被判定为“已填写”。
- 常见错误写法：
<input type="radio" name="q1" value="" checked style="display:none"> - 即使其他 visible radio 都没点，表单也能通过原生校验
- 这个 hidden item 会干扰所有 JS 获取逻辑，比如
document.querySelector('input[name="q1"]:checked')总返回它
如何用原生 HTML 正确强制必选？
唯一可靠方式是：整组 radio 初始状态全为空，不设任何 checked，只对其中一个显式添加 required。
- 删除所有
checked属性，包括隐藏项 - 确保所有同名 radio 都有明确的
value（空字符串value=""也有效，但业务上通常不推荐） -
required只需加在任意一个 radio 上，浏览器会自动覆盖整组 - 示例结构：
<input type="radio" name="q1" value="true" required><label>True</label> <input type="radio" name="q1" value="false"><label>False</label>
如何用 JavaScript 安全校验并获取选中值？
不要依赖 change 事件监听每个 radio，容易漏掉回车提交或初始状态判断；优先用 submit 事件统一拦截 + 原生校验兜底。
- 用
document.querySelector('input[name="q1"]:checked')获取当前选中项，返回null表示未选 - 取值时务必用可选链：
document.querySelector('input[name="q1"]:checked')?.value - 在
form.addEventListener('submit', e => {...})中调用e.target.checkValidity()，失败则e.preventDefault() - 若需自定义提示，先清空再设：
radioEl.setCustomValidity('')→radioEl.setCustomValidity('请作答')，然后调form.reportValidity()
容易被忽略的兼容性细节
移动端点击区域小、旧版 Safari 对 reportValidity() 支持弱、disabled radio 会被校验跳过——这些都不是边缘情况，而是真实线上问题高发点。
- label 必须正确绑定
for属性，否则点击 label 不触发 radio 选中，用户感知为“点不动” - 不要给 radio 设
disabled同时又加required，它会被校验逻辑直接忽略 -
form.requestSubmit()在 Android 4.x WebView 和 IE 中不支持，需降级为checkValidity() + 手动 submit - 如果用 CSS 隐藏 radio（如
opacity: 0或position: absolute; left: -9999px），仍可能被 screen reader 读出，且不影响校验逻辑——但语义和可访问性受损
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
