Shopify应用表单单选需求：实现每个表单仅可选择一个单选按钮

问题根源 #

你的代码错误在于全局清除所有.radio-label的选中类，没有限制在当前表单范围内，导致点击一个表单的选项时，所有表单的选中状态都会被移除。另外，代码只处理了样式类，没有同步原生radio的checked属性，不符合表单控件的规范。

最优解决方案：利用HTML原生radio分组功能 #

原生radio按钮本身就支持同组单选，只需要给同一表单内的所有radio设置相同的name属性，不同表单使用不同的name值即可，这是最简洁且符合标准的实现方式：

修改后的HTML结构 #

<!-- 表单1：所有radio的name设为form1-option -->
Form 1
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">
      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" name="form1-option" />
          <label class="radio-label">White</label>
        </div>
      </li>
      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" name="form1-option" />
          <label class="radio-label">Black</label>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- 表单2：所有radio的name设为form2-option -->
Form 2
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">
      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" name="form2-option" />
          <label class="radio-label">Small</label>
        </div>
      </li>
      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" name="form2-option" />
          <label class="radio-label">Large</label>
        </div>
      </li>
    </ul>
  </div>
</div>

配合CSS实现选中样式 #

不需要JS处理类，直接通过CSS关联radio的checked状态来控制样式：

/* 隐藏原生radio按钮，用label展示样式 */
.radio-input {
  display: none;
}

/* 选中时的label样式，根据需求修改 */
.radio-input:checked + .radio-label {
  background-color: #f0f0f0;
  border: 1px solid #222;
  border-radius: 4px;
}

无法修改HTML时的JS替代方案 #

如果受限于Shopify应用无法修改HTML的name属性，可通过JS限定操作范围，只在当前表单内处理选中状态：

// 遍历所有radio标签绑定点击事件
document.querySelectorAll('.radio-label').forEach(label => {
  label.addEventListener('click', function() {
    // 找到当前标签所属的表单容器
    const currentForm = this.closest('.globo-form-control');
    
    // 清除当前表单内所有已选中的样式和radio状态
    currentForm.querySelectorAll('.radio-label.selected-radio').forEach(activeLabel => {
      activeLabel.classList.remove('selected-radio');
      activeLabel.previousElementSibling.checked = false;
    });
    
    // 标记当前选项为选中状态
    this.classList.add('selected-radio');
    this.previousElementSibling.checked = true;
  });
});

关键改进点 #

1. 使用closest('.globo-form-control')定位当前表单容器，确保操作只在当前表单内进行
2. 同步修改原生radio的checked属性，保证表单数据和视觉样式一致

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