在 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状态，易导致表单提交时丢失选中值。
? 总结：利用 HTML 原生 name 分组机制，是实现多表单单选隔离最简洁、健壮、符合标准的方式。既避免 JS 错误风险，又确保无障碍访问与表单可提交性。
