name属性不一致会导致“假多选”，浏览器按name分组radio，拼写、大小写、空格或下划线差异均使其独立；label嵌套错误、重复ID、框架state与DOM不同步等也会引发点击异常。
name属性不一致导致“假多选”
浏览器只靠name把input[type="radio"]归为一组，只要有一个name拼错、大小写不同、多了空格或下划线，它们就变成独立个体，互相不干扰。比如name="status"和name="Status"会被当两组处理，点哪个都互不影响。
检查方法很简单：在控制台运行document.querySelectorAll('input[type="radio"][name="yourName"]')，看返回节点数是否等于你预期的选项个数。如果少于预期，大概率是某个radio漏写了name，或者值对不上。
- 动态插入时务必显式赋值
el.name = "xxx"，别依赖克隆旧节点（容易漏掉name） - 用模板字符串拼
name时，注意隐藏换行或制表符——name={`plan${i}`}比name={`plan ${i}`}更安全 - 服务端渲染要确保前后端
name完全一致，否则表单提交字段名对不上
label嵌套错误引发点击即取消
最常见的“点了就取消”现象，往往不是JS问题，而是<label></label>没闭合或错误包裹了多个radio。例如写成<label><h3>性别</h3></label>（缺），浏览器容错解析会把后续所有radio都吸进这个label里。一点击标题或空白区域，相当于同时激活整组，结果就是全部取消或只剩第一个被选中。
正确做法是用显式for/id关联：<label for="male">男</label><input id="male" type="radio" name="gender" value="male">。不要用<label><input>文本</label>这种隐式写法，结构稍一乱就出事。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有
<label></label>必须正确闭合，禁止嵌套<h3></h3>等块级标签且不闭合 - 避免用
pointer-events: none或遮罩层覆盖radio，这会让点击穿透到父级label上 - 如果用了
<fieldset disabled></fieldset>，记得它会锁死整组，比单个disabled更隐蔽
框架中state与DOM不同步导致视觉错乱
Vue 的v-model或 React 受控组件下，调用原生form.reset()只改 DOM 的checked状态，但不会更新组件内部的state。看起来“没重置”，其实是框架还在渲染旧值。
别硬扛原生 reset。更稳妥的做法是在重置按钮点击时，直接设selectedGender = ''（React）或selectedGender.value = ''（Vue），让框架驱动 DOM 更新。如果非要用form.reset()，就得在nextTick（Vue）或useEffect（React）里手动同步：form.gender.value读出来再赋给对应 state。
- React 中混用
defaultChecked和checked极易引发“uncontrolled to controlled”警告 - Vue 中
v-model绑定的初始值必须和某个value匹配，否则所有选项显示未选中 - SSR 场景下，服务端输出的初始
checked必须和客户端 state 一致，否则 hydration 会失败
重复ID让label点击失效
上下两组radio如果共用id="male"，那<label for="male"></label>就永远只关联到第一个input。点第二组的 label，实际激活的是第一组的 radio，造成“怎么点都是上面那组被选中”的错觉。
根本解法是彻底放弃靠id做关联。用querySelectorAll('input[type="radio"][name="plan"]')按name精准锁定语义分组，监听change事件也直接绑定在这组元素上，不依赖id，自然避开重复 ID 的坑。
- 同一页面内所有
id必须唯一，这是 HTML 基本规范，不是可选项 - 条件渲染或循环生成时，用
id={`${baseId}-${index}`}保证唯一性，别图省事复用固定值 - 用
for属性时，务必确认目标id真实存在且未被其他元素占用
name里一个空格、label少一个/、或者id重复了两次——这些细节在 DOM 解析时被悄悄放大，最终表现为“点了没反应”或“点了就乱”。修之前，先用querySelectorAll数一数组员数量，比猜快得多。 
