radio单选框设置必填需同组所有项name属性完全相同，且任一radio添加required属性；若无提示，检查name一致性、是否被disabled、是否阻止了原生表单提交。
radio 单选框怎么设置必填且触发浏览器原生提示
HTML 原生 required 属性对 <input type="radio"> 是有效的，但必须满足一个关键前提：同一组 radio 必须共享相同的 name 属性值。浏览器只会在表单提交时检查该 name 下是否有任意一项被选中；如果没有，就会弹出“请填写此字段”类提示（具体文案取决于浏览器和系统语言）。
常见错误是漏写 name，或不同 radio 的 name 拼写不一致（比如大小写、空格、下划线差异），导致浏览器认为它们是独立控件，required 失效。
- 所有同组 radio 必须有完全相同的
name值，例如name="gender" -
required只需加在其中任意一个 radio 上（通常加在第一个），无需每个都加 - 不能只靠 CSS 或 JS 模拟必填逻辑——那样无法触发原生提示，也无法被屏幕阅读器正确识别
为什么加了 required 还没提示？检查这三点
即使写了 required，实际提交时仍无提示，大概率是以下情况之一：
- 多个 radio 的
name值不一致，例如name="type"和name="Type"被视为两组 - radio 被包裹在
<fieldset disabled></fieldset>或父级设置了disabled，导致整个组不可交互且跳过验证 - 表单提交是通过
event.preventDefault()阻止后手动提交（如用fetch），此时原生验证不会触发——必须手动调用form.checkValidity()并处理
兼容性与移动端注意事项
Chrome、Firefox、Safari（macOS/iOS 15.4+）、Edge 均支持 radio 的 required 原生校验。但 iOS Safari 在早期版本（checked），且用户未点击任何选项就提交，可能不弹提示。稳妥做法是显式设置一个默认项：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<input type="radio" name="plan" value="basic" required> <input type="radio" name="plan" value="pro" checked> <input type="radio" name="plan" value="enterprise">
注意：checked 不影响 required 逻辑，只是提升体验；如果业务上确实不允许默认选中（比如“用户必须主动选择”），那就得配合 JS 做二次校验，并手动聚焦到该组第一个 radio 上以引导操作。
不要用 hidden input 模拟必填 radio
有人试图用隐藏的 <input type="hidden"> 配合 JS 更新值，再给它加 required，这是无效的。hidden input 不参与 radio 组的互斥逻辑，也不能被用户选择，浏览器会直接忽略其 required 校验（因为不可见且不可聚焦）。真正要校验的，永远是用户能点的那一组 visible radio。
复杂点在于：当 radio 组动态渲染（比如从 API 加载选项）、或嵌套在条件分支里时，容易漏掉 name 同步或 required 位置错配。这时候建议把 radio 组封装成最小可验证单元，每次插入前先 assert name 一致、至少一个含 required、且无重复 id。
