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 切换，容易和表单默认行为冲突，也绕过可访问性支持

实际修复时，最容易被跳过的点是：**name 一致性检查要肉眼逐字比对，不能只看变量名是否一样；label 和 id 的配对要一条一条手动核对，而不是靠复制粘贴后微调。**

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！