JavaScript设置两个radio选中状态时后者覆盖前者的问题求助

问题现象 #

通过JavaScript依次设置两个radio的checked=true，但最终只有最后一个radio处于选中状态；调换设置顺序后，也只有最后执行的那个radio被选中，前一个会被自动取消选中。

原因分析 #

这是HTML radio控件的原生特性：同一name属性值的radio会被划分为同一组，同一组内同时只能有一个radio处于选中状态。你的两个radio虽然在DOM结构上属于不同容器，但它们的name属性值相同，所以浏览器会自动维护“同一组单选”的规则，当设置第二个radio选中时，会自动取消同组内第一个radio的选中状态。

解决方案 #

方案1：修改radio的name属性（推荐） #

确保两个radio的name属性值不同，将它们划分为独立的分组，这样就能同时选中。

• 如果能直接修改HTML代码：

  <!-- 原sticky区域的radio -->
  <input type="radio" name="option-{{i}}" value="xxx">
  <!-- 修改mobile区域的radio name，添加唯一标识后缀 -->
  <input type="radio" name="mobile-option-{{i}}" value="xxx">
  

• 如果无法直接修改HTML，可通过JavaScript动态修改：

  var radioButtonSticky = stickyATC.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
  var radioButtonMobileSticky = mobileStickyAtc.find('.swatch-dropdown__sliding-option-selector-outer-container[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
  
  // 给mobile radio的name添加前缀，避免与sticky radio同组
  const mobileRadio = radioButtonMobileSticky.get(0);
  mobileRadio.name = `mobile-${mobileRadio.name}`;
  
  radioButtonSticky.get(0).checked = true;
  mobileRadio.checked = true;
  

方案2：替换为checkbox（按需选择） #

如果业务逻辑允许使用多选控件，可将其中一个或两个radio替换为type="checkbox"，checkbox天然支持多选，不会出现互相覆盖的问题。但需注意checkbox的交互逻辑与radio不同，需要确认是否符合业务需求。

验证 #

修改完成后，再次执行设置checked=true的代码，两个radio会同时处于选中状态，不会再出现互相覆盖的情况。

内容的提问来源于stack exchange，提问作者martini_dog