本文解析为何对多个 radio 元素连续设置 checked = true 时只有最后一个生效，并说明根本原因在于 html radio 的单选约束机制，而非 javascript 执行顺序或 jquery 问题；同时提供正确解决方案与代码示例。
在前端开发中，一个常见但易被忽视的陷阱是：试图通过 JavaScript 同时将多个 元素设为 checked。如以下典型代码所示：
radioButtonSticky.get(0).checked = true; radioButtonMobileSticky.get(0).checked = true;
表面上看，这是对两个独立 DOM 元素分别赋值，理应互不影响；但实际运行中，只有第二行生效——无论调换顺序，总只有一个被选中。这不是 jQuery .get(0) 的 Bug，也不是浏览器兼容性问题，而是 HTML 规范强制约束的结果。
? 根本原因：Radio 是“单选组”语义控件
根据 MDN 官方文档， 的设计初衷是在具有相同 name 属性的一组按钮中，仅允许一个处于选中状态。浏览器内核会自动维护该约束：当你将某个 radio 设为 checked 时，同 name 组内的其他 radio 会被隐式取消选中（即使它们位于不同容器、不同 DOM 节点层级）。
因此，关键不在 JavaScript 执行顺序，而在于这两个 radio 元素是否共享 name 属性。检查你的 HTML 结构，极大概率发现：
立即学习“Java免费学习笔记（深入）”；
即使它们由不同 JS 变量引用、位于不同组件（如桌面端与移动端吸顶栏），只要 name 值一致，浏览器就将其视为同一组单选按钮——checked = true 的赋值操作天然互斥。
✅ 正确解决方案
方案一：改用 checkbox（推荐用于多独立控制场景）
若业务逻辑上确实需要「多个可同时选中的开关」，应使用 。它无分组限制，每个 checkbox 状态完全独立：
对应 JS 无需修改，两次赋值均有效：
radioButtonSticky.get(0).checked = true; // ✅ 生效 radioButtonMobileSticky.get(0).checked = true; // ✅ 生效
方案二：确保 name 属性唯一（适用于必须用 radio 的场景）
若 UI/UX 强制要求 radio 样式（如圆点视觉），但逻辑上需独立控制，则必须为每个 radio 分配唯一 name：
此时两者不再构成单选组，checked 赋值互不干扰。
⚠️ 注意事项与最佳实践
- 不要依赖 id 或 CSS 类来区分 radio 组：浏览器只认 name 属性；
- 避免动态修改 name 后未重置状态：修改 name 可能导致已选中状态丢失，建议先保存 checked 值再更新；
- 服务端接收时注意字段名匹配：若改为不同 name，后端需适配多个参数；若改用 checkbox，注意其提交值为数组格式（如 size[]=M&size[]=L）；
- 可借助 fieldset + legend 提升语义化：当确需分组时，用语义化标签明确边界，而非仅靠 name。
✅ 总结
对多个 radio 元素连续设置 checked = true 却仅最后一个生效，本质是 HTML 单选机制的正常表现，而非代码错误。解决的关键在于：明确交互意图——若需多选，用 checkbox；若需单选但跨区域独立控制，则必须隔离 name 属性。 理解并尊重原生表单语义，是写出健壮前端逻辑的第一步。
