如何为每个表单中的单选按钮设置独立选择逻辑（通过 name 属性实现分组控制）-js教程-PHP中文网

如何为每个表单中的单选按钮设置独立选择逻辑（通过 name 属性实现分组控制）

在 Shopify 表单中，若需确保每个表单内的单选按钮互斥（即每组仅可选一项），关键在于为每组 radio 输入框统一设置唯一的 name 属性值，而非依赖 JavaScript 手动管理选中状态。

在 shopify 表单中，若需确保每个表单内的单选按钮互斥（即每组仅可选一项），关键在于为每组 radio 输入框统一设置唯一的 `name` 属性值，而非依赖 javascript 手动管理选中状态。

HTML 中的 <input type="radio"> 元素天然支持“单选组”行为——同一 name 值下的所有 radio 按钮自动构成一个互斥组，浏览器原生保障每次仅能选中其中一项。这正是语义化、轻量且可靠的解决方案，无需额外 JS 监听或 DOM 操作。

✅ 正确做法：为每个表单分配唯一 name，例如：

<!-- 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="form_1_color" value="white"><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="form_1_color" value="black"><label class="radio-label">Black</label>
        </div>
      </li>
    </ul>
</div>
</div>

<!-- 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="form_2_size" value="s"><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="form_2_size" value="m"><label class="radio-label">Medium</label>
        </div>
      </li>
    </ul>
</div>
</div>

⚠️ 注意事项：

name 值必须在同一表单内完全一致，且跨表单之间互不重复（如 form_1_color、form_2_size），否则会导致不同表单间意外联动；
建议为 value 属性赋予有意义的值（如颜色名、尺寸码），便于后端或 Shopify 主题逻辑识别提交数据；
若使用 Shopify 动态渲染（如 product.options 循环），可在 Liquid 中自动生成唯一 name，例如：name="option_{{ forloop.index }}"；
移除你原先的 JavaScript 逻辑——它不仅冗余，还因操作 .radio-label 而未同步更新 <input> 的 checked 状态，易导致表单提交时丢失选中值。