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