同 name 的 radio 仅分组不强制选中，required 属性加在任一成员上即可触发整组必选校验；label 需正确关联 input（推荐包裹式），value 不可缺失，隐藏时避免 display: none，动态添加需手动设 required，服务端必须二次校验。
radio 单选框 name 相同但没强制选中？
name 相同只是让浏览器把它们归为一组，但默认不校验“必选”。required 属性才是触发必填校验的关键——它必须加在**至少一个**同组 <input type="radio"> 上（通常加在第一个），且该元素不能被 disabled 或 hidden。
为什么只加一个 required 就够了？
浏览器对同 name 的 radio 组做整体校验：只要组内任意一个 input 带 required，提交时就会检查整组是否有选中项。如果都没选，会触发原生提示（如 “请选择一项”），表单无法提交。
- 多个 radio 都加
required不报错，但无额外作用，冗余 - 如果所有 radio 都
disabled或hidden，required会被忽略，校验失效 - 服务端仍需二次校验——前端校验可被绕过
常见错误：label 点击无效或校验不触发
问题常出在结构或属性缺失：
-
for属性值与对应input的id不匹配 → 点击 label 不触发选中 - radio 没写
value→ 提交时该组数据为空字符串，后端难区分未选和选了空值 - 用
display: none隐藏 radio →required校验可能失效（推荐用visibility: hidden或opacity: 0） - 动态插入 radio 后没补
required→ JS 插入的节点需手动设置required属性
最小可用示例（含校验与 label 关联）
注意：required 只出现在第一个 input 上；每个 input 都有 value；label 包裹 input 实现天然点击绑定，比用 for/id 更稳妥。
真正容易被忽略的是：当使用 CSS 自定义 radio 样式时，若隐藏原生 input 后未正确透传交互，或用 JS 拦截了 click 事件却没同步更新 checked 状态，required 校验会静默失败——此时必须确保 DOM 中的 checked 属性真实反映用户选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
