最稳妥方式是用 document.createElement 逐个创建单选按钮并显式设置 type="radio"、统一 name、唯一 value 和 id，再通过 label[for] 关联文本，设 checked=true 控制默认选中，最后委托或单独绑定 change 事件。
用 document.createElement 创建单选按钮最稳妥
直接拼接字符串（如 innerHTML += '...' ）容易引发 XSS 或丢失事件绑定，尤其当选项值来自用户输入时。必须用原生 DOM 方法逐个创建并显式设置属性。
关键点：所有同组单选按钮的 name 属性必须完全一致，value 各不相同，且需手动添加 type="radio" —— 浏览器不会自动补全。
const radio = document.createElement('input');radio.type = 'radio';-
radio.name = 'gender';（所有按钮共用同一 name） -
radio.value = 'male';（提交时实际发送的值） -
radio.id = 'radio-male';（便于关联<label></label>）
必须手动关联 <label></label> 才能点击文字选中
只放 <input type="radio"> 不够，用户无法通过点击文字触发选择。必须为每个按钮配一个 <label></label>，并用 for 属性指向其 id。
常见错误是漏掉 id 或写错 for 值，导致点击无响应。动态创建时尤其容易出错。
立即学习“Java免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先创建
input并设好id，再创建label label.setAttribute('for', 'radio-female');- 用
label.appendChild(document.createTextNode('Female'));插入文本（避免 innerHTML） - 最后把
label和input一起 append 到容器中
默认选中要设 checked 属性，不是 checked="true"
HTML 中写 checked="true" 是无效的；DOM 属性应设为布尔值 true，或直接赋值 radio.checked = true。
更安全的做法是：只对一个按钮设 checked = true，其余不设 —— 不要写 checked = false，否则可能干扰浏览器默认行为。
- 如果数据里带
default: 'female'，就遍历选项，匹配value === default时设checked = true - 不要用
setAttribute('checked', 'checked')，它在某些旧环境有兼容问题 - 设完
checked后，该按钮的checked属性读出来是true，但对应 HTML 特性（attribute）不一定存在
批量渲染后记得调用 addEventListener 绑定事件
动态创建的按钮不会自动继承页面加载时写的事件监听器。必须在插入 DOM 后，单独为每个按钮加 change 监听，或委托给父容器。
委托更高效：监听父容器的 change 事件，用 e.target.matches('input[type="radio"][name="gender"]') 过滤。
- 若用委托，确保父容器在创建按钮前已存在且不被替换
- 若为每个按钮单独绑定，注意闭包陷阱：循环中用
let声明变量，或用radio.addEventListener('change', function() { ... })内联写法 - 不要在循环里写
radio.onclick = handler，它只能绑定一个，后续会覆盖
真正麻烦的是 name 值拼写不一致、id 和 for 不匹配、checked 逻辑没清空旧状态——这些错误不会报错，但单选组完全失效，得一行行检查 DOM 结构。
