radio互斥依赖name属性相同，跨form也生效；value决定提交值，推荐英文标识；必须用label扩大点击区域；JS获取需用[name]:checked选择器。
radio必须用相同name属性才能互斥
HTML中input[type="radio"]本身没有“自动互斥”机制，互斥行为完全依赖浏览器对name属性的识别。只要两个或多个radio元素的name值完全一致（包括大小写和空格），它们就属于同一组，选中一个时其他同名项会自动取消选中。
常见错误是漏写name、拼写不一致、或在不同表单里用了相同name但没意识到它们仍会互斥（跨form也生效）：
-
—— 没name，无法参与任何互斥组 -
和—— 大小写不同，视为两组 -
与—— 仍互斥，name作用域是整个文档
value属性决定提交时的实际值
用户看到的是label文字，但表单提交或JS读取时拿到的是value。不要把中文或空格直接塞进value，尤其涉及后端解析时容易出问题：
- ✅ 推荐：
- ❌ 避免：
—— URL编码后难处理，且部分后端框架不友好 - ⚠️ 注意：
value为空字符串value=""是合法的，但提交时可能被某些库忽略，建议显式设为有意义的标识符
用label包裹或for绑定提升可点击区域
纯radio按钮很小，直接点击容易误操作。必须配合label扩大热区，否则用户体验极差：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐方式1（包裹）：
- 推荐方式2（for绑定）：
- ❌ 错误写法：
小号——input不能闭合，且label未关联，点击文字无效
JS获取当前选中的radio值要遍历同name组
不能用document.querySelector('input[type="radio"]')直接拿，它只返回第一个（无论是否选中）。正确做法是先按name查一组，再过滤出checked项：
const selected = document.querySelector('input[name="priority"]:checked');
if (selected) {
console.log(selected.value); // 如 "high"
} else {
console.log('未选中任何项');
}
注意点：
-
:checked伪类只匹配当前已勾选的，如果全都没选，querySelector返回null - 若需监听变化，应在所有同
name的radio上统一绑change事件，或委托到父容器（避免重复绑定） - 动态插入新
radio时，记得确保name一致，否则新项不会加入原互斥组
实际开发中最容易忽略的是name值的全局唯一性控制——比如在Vue/React组件中多次渲染同一组radio，若name写死成静态字符串，不同实例会意外互斥；这时得用唯一ID或组件key来隔离name。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
