提交前应在 submit 事件中用 form.querySelector('input[name="xxx"]:checked') 检测 radio 组是否选中，返回 null 即未选；禁用项需提前排除；required 属性在现代浏览器中对 radio 组整体有效，只需任一同行 radio 添加即可。
提交前如何检测 <input type="radio"> 组未选中？
浏览器不会自动阻止表单提交，也不会报错——radio 组没选中时，对应字段根本不会出现在 FormData 或 submit 请求体中。你得自己抓这个空状态。
关键不是“怎么加校验”，而是“在哪加、用什么信号判断”。别依赖 change 事件监听（用户可能压根没点过），得在 submit 事件里实时查。
- 用
form.querySelector('input[name="xxx"]:checked')查是否有选中项，返回null就是没选 - 不要用
form.elements.xxx.value—— 没选中时它返回空字符串，和选了空值的value=""无法区分 - 如果组里所有
input都设了disabled，也要提前排除，否则:checked伪类不匹配禁用项
required 属性对 radio 组真的有用吗？
有用，但只在部分场景下生效：现代浏览器（Chrome 90+、Firefox 88+、Safari 15.4+）支持对 radio 组整体应用 required，前提是所有同名 input 都在同一表单内，且至少一个未被 disabled。
- 写法必须是：
<input type="radio" name="gender" value="m" required>——required放任意一个同名项上即可，不用每个都加 - 旧版 Safari（
- 注意：如果用户先选中再取消（比如用空格键反选），部分浏览器不会触发
invalid，required仅防“完全没碰过”
如何兼容老浏览器并避免重复提示？
纯 required 不可靠，JS 校验又容易和原生提示打架（比如同时弹两个 alert 或两行红边框）。稳妥做法是：禁用原生验证，全由 JS 控制。
立即学习“前端免费学习笔记（深入）”；
- 给
<form></form>加novalidate属性，彻底关闭浏览器默认行为 - 在
submit事件处理器里调用event.preventDefault()，然后手动检查 - 错误反馈别只靠
alert：给对应 radio 组的父容器加class="error"，CSS 控制样式，更可控 - 聚焦到第一个未选 radio 的父
label上（label.control.focus()），比滚动到顶部更精准
常见误判：为什么 document.querySelector('[name="x"]:checked') 总是 null？
不是代码写错了，大概率是作用域或时机问题。最常踩的三个坑：
- 查询时 DOM 还没加载完——确保脚本在
