单选按钮无法互斥选择，90%是name属性不一致或缺失导致的；name必须完全相同（含大小写、无空格），浏览器仅凭name判断分组，与id、class、位置无关。

单选按钮无法互斥选择，90% 是 name 属性不一致或缺失导致的，不是 JS 或 CSS 问题。

name 属性必须完全相同（含大小写、无空格）

浏览器只靠 name 判断是否属于同一组。哪怕一个写 name="gender"，另一个写 name="Gender" 或 name=" gender"，它们就被当成两组独立控件。

• ✅ 正确： 和
• ❌ 错误：name="theme" 与 name="Theme"、name=" theme"、name=""、或干脆没写 name
• 服务端接收也依赖这个值，PHP 用 $_POST['theme']，Node.js 用 req.body.theme，前后端必须对齐

label 点击失效或误触发第一个选项

点击 没反应，或总选中第一个 radio，大概率是 for 和 id 不匹配。

• A 必须对应 ，不能只靠 name 或位置关系
• 多个 会全部绑定到第一个匹配的 id，造成误选
• 避免用 display: none 隐藏 radio，这会让 label 失效；改用 position: absolute; opacity: 0; width: 1px; height: 1px;

React/Vue 中 checked 状态不更新？先看原生逻辑

框架里 radio 不切换，往往不是状态没更新，而是 HTML 分组本身没成立——框架无法绕过浏览器原生规则。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• React 中每个 必须有相同的 name，否则 checked 属性再正确也没用
• Vue 中不要只靠 v-model，先确保 name 统一；否则即使绑定同一个变量，视觉上仍是“各自为政”
• 别用 (click)="xxx" 或 onclick="xxx" 替代原生行为，它不改变 checked 状态，也不触发表单验证逻辑

默认选中和禁用控制要分清场景

checked 只控制初始状态，disabled 控制可交互性，两者作用域不同，混用易出错。

• checked 是布尔属性，存在即生效，不要写 checked="true" 或 checked="checked"
• JS 动态设置用 element.checked = true，不是 setAttribute('checked', '')（后者在旧 Safari 下可能不触发表单逻辑）
• disabled 的 radio 不会提交 value，且点击无反馈；如需“视觉禁用但保留逻辑”，应结合 CSS + JS 控制

最容易被忽略的是：所有检查都应在浏览器开发者工具的 Elements 面板里直接看渲染后的 DOM，而不是只信源码或框架模板——因为服务端渲染、JS 插入、SSR hydration 都可能导致最终 name 或 id 值与预期不符。

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