在 Shopify 表单中，若需让每个表单内的单选按钮互斥（即每组仅可选一项），只需为同一表单下的所有 元素统一设置相同的 name 属性值；不同表单使用不同 name，浏览器原生机制即可自动实现分组控制。
在 shopify 表单中，若需让每个表单内的单选按钮互斥（即每组仅可选一项），只需为同一表单下的所有 `` 元素统一设置相同的 `name` 属性值；不同表单使用不同 `name`，浏览器原生机制即可自动实现分组控制。
这是最简洁、可靠且符合 HTML 规范的解决方案——无需 JavaScript 监听点击、无需手动管理 checked 状态或切换 CSS 类。浏览器原生的单选按钮（radio）行为正是基于 name 属性进行分组：同名 radio 按钮构成一个互斥组，用户只能从中选择一项。
✅ 正确做法：为每组 radio 添加唯一且一致的 name
以你的结构为例，为「Form 1」的所有 radio 输入添加 name="form1"，为「Form 2」添加 name="form2"，依此类推：
<!-- 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" 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="form1" 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="form2" value="small" />
<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" value="medium" />
<label class="radio-label">Medium</label>
</div>
</li>
<!-- 更多选项... -->
</ul>
</div>
</div>? 提示：建议同时为每个
<input>添加value属性（如value="white"），以便后端或 Shopify 主题逻辑准确识别所选值。
❌ 为什么你原来的 JS 方案不推荐？
你尝试用 JavaScript 手动控制 .selected-radio 类的增删，存在多个问题：
-
破坏原生行为：未同步更新
input.checked状态，导致表单提交时实际未选中任何值； -
作用域错误：
rd.forEach(...)选取的是全部.radio-label，跨表单干扰（点击 Form1 的 label 会清除 Form2 的样式）； - 冗余复杂：绕过浏览器内置机制，增加维护成本和兼容性风险。
✅ 进阶提示：配合 CSS 实现视觉反馈（带边框高亮）
若你还希望“被选中的选项”显示彩色边框（如问题标题所述），可利用 :checked 伪类 + 邻居选择器（+）实现纯 CSS 高亮：
.radio-input:checked + .radio-label {
border: 2px solid #007bff;
border-radius: 4px;
padding: 6px;
}确保 HTML 中 <input> 和 <label></label> 保持相邻顺序（如你当前结构所示），该样式即可精准作用于当前选中的标签。
总结
- ✅ 核心原则：用
name属性分组，是语义化、零依赖、全浏览器兼容的标准方案； - ✅ 最佳实践：每组 radio 使用唯一
name，并补充有意义的value； - ✅ 视觉增强：优先使用
:checked + labelCSS 实现边框/背景等选中态样式； - ❌ 避免用 JS 模拟单选逻辑——既易出错，又违背表单设计本意。
这样修改后，你的 4 个 Shopify 表单将各自拥有独立、稳定的单选控制，且完全适配 Shopify 表单提交流程。
