动态添加 radio 必须保证 name 一致、同步创建 label 关联、手动触发 change 事件，否则导致互斥失效、可访问性缺失或逻辑中断。
动态添加 radio 选项必须保证 name 属性一致
否则浏览器无法识别为同一组，点击后不会自动取消其他项。新增的 <input type="radio"> 必须显式设置 name 属性，且值要和已有按钮完全相同（大小写敏感）。常见错误是漏写 name，或拼错、混用空格/下划线，导致新按钮变成“孤立单选”，破坏互斥逻辑。
建议从已有按钮中读取 name 值复用，而不是硬编码：
const existing = document.querySelector('input[type="radio"][name]');
const groupName = existing ? existing.name : 'defaultGroup';
newRadio.name = groupName;
- 不要依赖父容器 class 或 data 属性推断 name，容易出错
- 如果页面存在多组 radio（如
theme和language），需按组分别管理，不能共用一个添加函数 - 新增后立即调用
newRadio.checked = true是安全的，不会触发多余 change 事件（除非已监听）
label 关联必须同步创建，否则可访问性失效
只加 <input> 不够——屏幕阅读器、点击文本区域选中功能、键盘 Tab 导航都会失效。每次新增 radio，必须同时创建对应 <label></label>，并确保 for 属性与 radio 的 id 匹配。
别用 innerHTML += 拼接字符串，易 XSS 且破坏已有事件绑定：
const label = document.createElement('label');
const radio = document.createElement('input');
radio.type = 'radio';
radio.id = `opt_${Date.now()}`; // 确保 id 唯一
radio.name = groupName;
label.htmlFor = radio.id;
label.textContent = '新选项';
label.insertBefore(radio, label.firstChild); // 让 radio 在 label 内部最前
container.appendChild(label);
- 避免用
label.appendChild(radio)后再设htmlFor——部分旧版 Safari 对动态设置htmlFor支持不稳定 - 若 label 内含 HTML 片段（如图标），用
label.innerHTML = '<i class="icon"></i> ' + text，但需对text做textContent转义 - 不推荐嵌套结构如
<label><input><span>text</span></label>，CSS 定位和语义更难控制
选中状态与 change 事件监听需手动触发
动态添加 radio 后，即使设置了 checked = true，也不会自动触发已绑定的 change 事件监听器。浏览器只对用户交互触发该事件，JS 赋值属于“程序控制”，需手动 dispatch：
radio.checked = true;
radio.dispatchEvent(new Event('change', { bubbles: true }));
- 不调用
dispatchEvent，表单验证、联动显示等逻辑可能卡住 - 监听器若绑定在父容器上（事件委托），
bubbles: true是必须的 - 避免在添加时遍历所有同 name radio 并设
checked = false——性能差且可能误清用户刚选中的项；应由业务逻辑决定是否取消其他项 - 移动端 Safari 中，快速连续点击新增按钮可能导致 focus 错乱，可在添加后加
radio.focus()（仅当需要键盘操作时）
value 值重复会导致提交异常，必须校验唯一性
后端常靠 value 区分选项，若动态添加时生成了重复 value（比如固定写死 value="yes"），表单提交后可能只收到一个，或被后端校验拦截。校验应在插入 DOM 前完成：
function isValueUsed(value) {
return Array.from(document.querySelectorAll(`input[type="radio"][name="${groupName}"]`))
.some(r => r.value === value);
}
if (!isValueUsed(newValue)) {
radio.value = newValue;
container.appendChild(label);
}
- 别用
document.querySelector(`input[value="${newValue}"]`)——若newValue含引号或反斜杠，会破坏选择器语法 - 用户输入的 value 应 trim() 并过滤零宽空格（
\u200b），否则看似相同实则不同 - 如果允许“文字不同但 value 相同”（如多语言标签），那是业务需求，但需明确告知后端该 value 代表同一语义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
