单选按钮组重置必须依赖form.reset()或手动设置checked；浏览器不支持自动全取消，type="reset"仅识别HTML中初始的checked属性，JS动态设置的checked不会被reset识别。
单选按钮组重置必须依赖 form.reset() 或手动设 checked
原生单选按钮（）没有独立的“清空”能力，浏览器不支持让一组 radio 全部未选中——除非其中某个选项带 checked 属性，否则初始状态就是全未选；而一旦用户选中一个，再点 type="reset" 按钮，只会恢复到 HTML 里那个带 checked 的选项。所以“重置所有选项”在语义上其实只有两种可能：回到初始选中项，或强制全部取消勾选（后者需 JS 干预）。
type="reset" 按钮只认 HTML 中的 checked 属性
它不会读取 JS 设置的 element.checked = true，只看页面加载时哪个 标签写了 checked。常见错误是动态渲染 radio 后用 JS 补了默认选中，但没写进 HTML 属性，结果 reset 一按就全空了（因为初始 HTML 没任何 checked）。
- ✅ 正确做法：初始化时确保默认项的 HTML 包含
checked，比如 - ❌ 错误做法：用 JS 执行
document.querySelector('[value="active"]').checked = true后指望 reset 恢复它 - ⚠️ 注意：
defaultChecked属性可被 JS 设置，且会被form.reset()尊重，但必须在 DOM 加载后、用户操作前完成赋值
想彻底取消所有 radio 选中？只能用 JavaScript 手动清空
这是最常被忽略的实际需求——用户点了某个 radio，又想“不选任何一项”。原生 reset 做不到，必须 JS 干预。关键是：只操作同名 radio 组，避免误伤其他字段。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 获取同名 radio 集合：
document.querySelectorAll('input[name="gender"]:radio') - 遍历并清除：
radios.forEach(r => r.checked = false) - 如果该组初始就不该有默认选中，HTML 里就不要写任何
checked，否则 reset 会把它拉回来 - 若需兼容老浏览器（如 IE），用
for (let i = 0; i
Vue/React 等框架里，type="reset" 基本失效
框架接管了表单控件的值绑定（如 Vue 的 v-model、React 的受控组件），DOM 的 checked 属性不再反映真实状态。此时点击 type="reset" 按钮，只会重置 DOM 属性，UI 不变，数据也不变。
- Vue 用户应调用
this.$refs.form.reset()+ 手动重置 data 中对应字段（如this.selectedOption = null） - React 受控组件必须同步更新 state，不能只靠 DOM 操作
- Ant Design、Element Plus 等 UI 库提供
resetFields()方法，优先使用它们的 API
重置单选按钮组最麻烦的地方不在代码，而在设计意图是否明确：你是想“回到默认选项”，还是“允许无选项状态”——前者靠 HTML checked 和 form.reset() 就够，后者必须用 JS 强制干预，且要全程绕过原生 reset 机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
