最省事的方式是用 JavaScript 动态生成 radio 组：统一 name 实现互斥，id 与 label 的 for 值一一匹配；选项用数组存储，map 拼接含 id、name、value、label 的 HTML 字符串，通过 innerHTML 插入容器。
用 JavaScript 动态生成 radio 组最省事
直接手写一堆 容易漏 name、id、for，还难维护。用 JS 一次性生成，改数据就改选项，不用碰 HTML 结构。
关键点：所有 radio 必须共享同一个 name 值才能互斥；每个 id 和对应 label 的 for 必须唯一且匹配。
- 把选项存成数组，比如
const options = ["苹果", "香蕉", "橙子"] - 用
options.map()拼出带id、name、value、label的完整片段 - 注意
value最好用英文或下划线，别直接用中文（表单提交/后端处理更稳） - 插入到容器时用
innerHTML或insertAdjacentHTML，别用document.write
const container = document.getElementById("fruit-group");
const options = ["apple", "banana", "orange"];
const labels = ["苹果", "香蕉", "橙子"];
container.innerHTML = options.map((val, i) => `
<div>
<input type="radio" name="fruit" id="fruit-${val}" value="${val}"><label for="fruit-${val}">${labels[i]}>
</label>
</div>
`).join("");
用模板字符串 + 数据对象控制 value 和 label 分离
如果选项的 value 和显示文案不一致（比如后端要收 "usd"，页面显示 “美元”），硬编码数组就不够用了，得用对象数组。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个项是
{ value: "usd", label: "美元" }这种结构，语义清晰，增删改都方便 -
value保持简短、无空格、小写，避免表单提交出错或 JSON 解析失败 - 别在
label里插 HTML，除非你明确做了转义（否则 XSS 风险） - 如果需要默认选中某一项，加个
checked属性判断，比如${item.value === "default" ? 'checked' : ''}
用 CSS Grid/Flex 自动排版 radio 选项
手动加 这些错误不会报 JS 错，但会导致单选失效或无障碍访问失败（屏幕阅读器读不到）。 复杂点在于：动态生成时，name 和 id 的拼接逻辑必须稳定；多人协作时，最好把生成逻辑抽成函数，而不是散落在各个
display: flex 或 display: grid，用 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
，样式统一加在 label 上，比单独调 input 更容易对齐input，用 ::before 或背景图重绘选中状态——这样不会被浏览器默认样式干扰布局cursor: pointer 到 label，不然用户点文字没反应常见错误：name 不一致、id 重复、label for 错位
name 写错一个字母，比如 fruit 和 fruits，两个 radio 就变成独立控件，能同时选中id，多个 radio 共用同一个 id="opt1"，label for="opt1" 就只绑定第一个for 值和 id 不完全一致（多了空格、大小写不同、用了连字符但 id 用下划线），点击 label 就无法聚焦 inputvalue 都非空，空 value="" 提交后就是空字符串，不是“未选择”innerHTML 字符串里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
