radio按钮必须同name值成组才具单选功能，否则无法互斥选中；需配label提升可访问性，用:checked选择器获取当前选中值，checked仅控制默认状态而非双向绑定。

radio 按钮必须成组才有效

单独放一个 没有意义——它永远无法被“选中”，因为浏览器要求同名的 radio 才算一组，只有同一 name 值下的多个选项才能互斥。没设 name，或者每个 radio 的 name 都不同，就等于各自为政，点哪个都只是“自己勾上又取消”，看起来像没反应。

实操建议：

• 所有属于同一逻辑选项的 radio 必须共享相同的 name 属性值，比如 name="gender"
• value 值要各不相同，提交时后端靠这个区分选了哪一项
• 给每个 radio 配一个 ，并用 for 指向其 id，或把 radio 包在 里——否则用户只能点那个小圆圈，体验极差

checked 属性只控制默认选中，不绑定状态

checked 是一个布尔属性，写上就表示页面加载时默认选中该项；但它不是双向绑定，JS 修改 input.checked = false 能取消，但用户点击其他同组 radio 后，它会自动变成 false，你不用手动清空别的项。

常见错误现象：

• 写了多个 checked —— 浏览器只认最后一个，其余无效
• 用 JS 动态设置 checked = true 却没清掉同组其他项 —— 实际仍能多选（因为没清），但不符合单选语义
• 以为 checked 是响应式数据，修改它就能触发 Vue/React 更新 —— 不会，它只是初始状态标记

获取 radio 选中值不能直接查 DOM 元素的 value

一组 radio 中只有一个被选中，但 DOM 里有多个 元素。直接对某个元素取 .value 拿到的是它的固定值，不是当前选中的那个。

正确做法是先定位到这一组，再找其中被选中的那个：

Wechat Article Html

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

下载

• 原生 JS：document.querySelector('input[name="theme"]:checked')?.value
• jQuery：$('input[name="theme"]:checked').val()
• 如果没选中，上述选择器返回 null 或空集合，记得判空

别用 document.getElementsByName("theme")[0].value —— 这永远取第一个，和是否选中无关。

无障碍与语义问题常被忽略

screen reader 用户依赖 name 和 label 理解选项含义。只靠视觉排列（比如旁边写个“男”）是不够的。

必须做到：

• 每个 radio 都有明确、唯一的 id
• 对应 包含可读文本
• 整组 radio 最好包在
  里，并用
  说明这组用途，比如“请选择您的订阅频率”

少了这些，键盘用户 Tab 切换时可能不知道当前聚焦的是什么，或者听到一堆“未选中 单选按钮”却不知代表什么含义。