单靠HTML的required属性无法稳定实现单选按钮必选，必须用JavaScript配合checkValidity()和reportValidity()主动校验；需统一通过name获取所有选项、过滤disabled项、检查是否存在checked项，并在submit时拦截并触发原生提示。
HTML <input type="radio"> 默认不校验必选
浏览器原生行为下，<input type="radio"> 组即使加了 required 属性，在多数旧版浏览器（如 Safari 15.6 及更早、部分 Android WebView）中也不触发校验；Chrome/Firefox 虽支持，但仅当整个组中**没有任何一项被 checked** 时才报错，而用户一旦点过任意一个再取消（比如用空格键反选），required 就失效了——因为 DOM 中仍残留 checked 状态或事件未同步。
所以单靠 HTML 属性无法稳定实现“必选”，必须配合 JS 控制。
用 checkValidity() + reportValidity() 主动校验
这是最轻量、兼容性最好的方案：不依赖第三方库，且能精准控制校验时机（比如表单提交前）。
- 给单选组所有
<input>设置相同name（这是组成一组的前提） - 在表单
submit事件中调用event.preventDefault()，避免默认提交 - 用
document.querySelectorAll('input[name="xxx"]')获取全部选项 - 遍历检查是否存在
checked === true的项；若没有，调用任一 radio 的reportValidity()触发原生提示
form.addEventListener('submit', e => {
const radios = document.querySelectorAll('input[name="gender"]');
const hasChecked = Array.from(radios).some(r => r.checked);
if (!hasChecked) {
e.preventDefault();
radios[0].reportValidity(); // 触发浏览器原生错误提示
}
});避免用 required 混用导致行为不一致
如果同时给每个 radio 都加 required，不同浏览器处理逻辑差异大：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Chrome：只校验组内是否有选中，忽略单个
required - Safari：可能对每个 radio 单独校验，导致多次重复提示
- 某些 WebView：直接忽略所有
required
结论：**不要给 radio 元素本身加 required**，统一由 JS 控制校验逻辑，否则调试成本远高于收益。
注意 disabled 项和初始状态的干扰
校验时容易漏掉两种情况：
- 某选项初始为
disabled，但它仍参与querySelectorAll查询，需额外过滤：r => !r.disabled && r.checked - 页面加载后用户没操作过，所有 radio 都是未选中状态，此时必须靠 JS 主动拦截，不能指望用户“点一下再提交”
更稳妥的写法是把校验逻辑封装成函数，在 submit 和 input（监听 change 或 keyup）事件里都调用，确保实时反馈。
