如何使用JavaScript动态创建HTML单选按钮组-html教程-PHP中文网

最稳妥方式是用 document.createElement 逐个创建单选按钮并显式设置 type="radio"、统一 name、唯一 value 和 id，再通过 label[for] 关联文本，设 checked=true 控制默认选中，最后委托或单独绑定 change 事件。

如何使用javascript动态创建html单选按钮组

用 `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 值，导致点击无响应。动态创建时尤其容易出错。

先创建 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。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

更安全的做法是：只对一个按钮设 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 结构。