嵌套包裹是最简单可靠的热区扩展方式，前提是radio为label直接子元素且未隐藏；显式for/id绑定适用于非相邻布局；js干预需避免阻断原生点击链。

直接用 <label></label> 包裹 <input type="radio">，是最简单、最可靠、无障碍支持最好的方式。点击文字、空白、图标甚至 <label> 内任意位置，都能触发选中或取消（前提是没被 JS 干扰），不需要写一行 CSS 或 JS。</label>

为什么嵌套 <label></label> 就能扩大热区

浏览器原生把 <label></label> 的整个渲染区域映射为内部 <input> 的点击热区——这不是模拟，是 HTML 语义规范强制行为。但有两个硬性前提：

• <input type="radio"> 必须是 <label></label> 的直接子节点，中间不能插 <span></span>、<div> 等容器 <li> <code>input 不能是 display: none、visibility: hidden 或 type="hidden"；它得能获得焦点、有渲染盒（哪怕尺寸为 0）

一旦违反任一条件，点击 label 文字就失效，只剩 input 本体那 13×13px 可点。

for + id 显式绑定更适合复杂布局

当单选框和文字在 DOM 中不相邻（比如文字在上、input 在下），或需要隐藏 input、做响应式错位时，显式绑定更可控：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• id 必须全局唯一、大小写敏感；for 值必须与目标 id 完全一致（不带 #）
• input 可以 display: none 或 position: absolute 移出可视区，<label for="xxx"></label> 依然有效
• 多个 <label for="xxx"></label> 指向同一 id 时，浏览器只响应第一个——调试时注意检查重复 id

示例：<label for="sms">短信通知</label><input type="radio" id="sms" name="channel" value="sms">

JS 取消选择逻辑常让 label 失效

很多“可取消单选框”实现里，JS 直接监听 input 的 click 或 mousedown，并在已选中时阻止默认行为或覆盖 onclick。这会切断 <label></label> 的原生点击链，导致只有点小圆圈才生效，点文字无效。

• 优先用 input.click() 触发原生事件链，而不是手动设 checked = false 后再 dispatch change
• 如果必须拦截，确保 label 的点击最终仍调用 input.click()，而非绕过它去操作 checked 属性
• 避免在 mousedown 里 event.preventDefault() —— 它会直接废掉 label 的透传机制

真正容易被忽略的点是：label 扩大热区的能力，完全依赖浏览器对 HTML 语义的原生支持。任何试图用 pointer-events: none、display: none、中间嵌套容器或 JS 阻断事件流的操作，都会无声无息地把它关掉，且很难从视觉上察觉。