label for属性与input id必须完全匹配才能触发点击穿透，否则label仅作普通文本；同组radio的name值须严格一致（大小写、空格、字符均不可差），且每个input需有唯一id。
label for 属性和 input id 不匹配会导致点击失效
点击 label 却没反应，最常见原因是 for 和 id 没对上。浏览器靠这个关联来触发点击穿透，一旦不一致，label 就只是普通文字。
-
label的for值必须和对应input的id完全相同（大小写、空格、拼写都不能差） - 比如
<label for="gender-male">男</label>必须配<input id="gender-male" type="radio" name="gender"> - 多个 radio 共用一个 name 是分组前提，但每个
id必须唯一；重复id会让 label 随机绑定到某个 input，甚至完全失效 - 不要省略
id：没有id的input，for就找不到目标，哪怕 label 里包着 input 也不可靠（尤其在 flex 或重置样式后）
name 属性不一致会让单选按钮“各自为政”
看起来是同一组，点一个却不能取消另一个，八成是 name 值不统一。HTML 的单选逻辑只认 name，别的都不管。
- 所有同组 radio 的
name必须完全相等：包括大小写、无前后空格、无隐藏字符 - 错误示例：
name="gender"和name=" Gender "或name="Gender"是两组 - 不同语义的组必须用不同
name，比如name="theme"和name="language"绝不能混用 - 服务端接收也依赖这个值，前端写
name="user_role"，后端就得用req.body.user_role（Node.js）或$_POST['user_role']（PHP）去取
标签嵌套错误或未闭合会意外劫持点击行为
看似无关的结构问题，可能让整个 radio 组“被重置”或点击失灵——比如 label 包裹了标题又没闭合，浏览器容错解析时会把后面所有 radio 都吞进去。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 检查是否有未闭合的标签，例如
<h3>Select Gender<h3></h3> </h3>（少了个斜杠），这会让后续input被错误包裹进label - 避免用
<label><input></label>这种嵌套方式作为主要方案，它在某些 CSS 布局（如display: flex）下会失效 - 禁用
display: none隐藏 radio：这会让关联的 label 失效；改用position: absolute; opacity: 0; width: 1px; height: 1px;等可访问性友好的隐藏方式
移动端点击区域小不是错觉，而是 label 绑定没做实
在手机上要点好几下才生效？大概率是 label 没真正绑死 input，导致热区没扩大。
立即学习“前端免费学习笔记（深入）”；
- 纯靠视觉包裹（
label标签里放input）不如显式绑定稳定，尤其当用了自定义样式或框架类名时 - 务必给每个
input设唯一id，再用label for="xxx"显式指向，这是跨设备、跨浏览器最稳的写法 - 别依赖父容器的点击事件代理来模拟 radio 切换，容易和表单默认行为冲突，也绕过可访问性支持
