最直接有效的方式是给同 name 的 radio 组中任意一个添加 required 属性；需确保 name 一致、每个有 value、避免 display:none 隐藏、label 正确关联，JS 动态校验用 document.querySelector('input[name="xxx"]:checked')，服务端必须二次校验。
在 HTML5 中，校验 radio 组是否至少有一项被勾选，最直接有效的方式是使用原生 required 属性，配合正确的 DOM 结构和行为规范。
用 required 属性触发浏览器原生校验
只需给同 name 的 radio 组中**任意一个** 添加 required 属性（通常加在第一个），浏览器就会在表单提交时自动检查整组是否有选中项：
- 如果没选任何一项，会阻止提交，并显示默认提示（如“请填写此字段”）
- 该校验是整组生效的，不需要每个 radio 都加 required
- 若所有 radio 都被
disabled或用display: none隐藏，校验会失效——应改用visibility: hidden或opacity: 0
确保结构和值合法才能校验有效
required 起作用的前提是 radio 组本身能被正确识别和提交：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- name 必须完全一致：大小写、空格、拼写都要相同，否则分属不同组
- 每个 radio 必须有 value：没有 value 的选项，即使被选中，提交时也会传空字符串，后端难区分“未选”和“选了空值”
-
避免隐藏的默认选项：比如加了
checked又设style="display:none"的 radio，浏览器会认为已填，绕过校验 -
label 要正确关联：推荐用包裹式
，比for/id更可靠，确保点击文字能触发选中
用 JavaScript 动态校验（适合非 submit 场景）
当不走原生表单提交（如多步表单点击“下一步”按钮），可用 JS 检查当前组是否已选：
- 通过 name 获取全部 radio：
document.querySelectorAll('input[name="xxx"]') - 检查是否存在已勾选项：
Array.from(radios).some(r => r.checked) - 更简洁写法：
document.querySelector('input[name="xxx"]:checked')，返回null表示未选 - 注意：动态插入的 radio，需手动补上
required属性，否则原生校验不生效
服务端必须二次校验
前端校验可被禁用或绕过，所以后端收到数据时仍要确认：
- 检查该字段是否有值（不能只判空字符串，要结合业务逻辑）
- 验证值是否属于预设合法选项列表（防篡改）
- 不要依赖前端传来的 “已选中” 状态做关键判断
