点击加购按钮获取多分组单选按钮选中值实现商品变体加购

你之前的实现缺陷很明确：给单选容器绑定点击事件后，每次点击都会无脑往数组追加值，没有对同选项组的旧选中值做覆盖，用户切换同组选项时旧值会一直留在数组里，根本没法和变体的options数组做精确匹配。
把选中值采集逻辑放到「加入购物车」按钮点击时执行是完全正确的方案——不需要提前监听单选操作存储值，点击加购时实时采集的就是用户最终确认的选择，从根源上避免旧值残留。

• 直接删掉原来绑定在.radios容器上的点击监听代码，全局维护optionsArray、filteredOptionsArray的逻辑完全没用
• 点击加购按钮时，通过:checked CSS伪类选择器，直接获取所有单选组下当前被选中的单选输入框
• 按页面渲染的选项组顺序收集选中值，这个顺序和变体数据里的options数组顺序完全一致，可直接做全等匹配
• 增加选全校验：如果收集到的选中值数量和商品总选项组数不一致，说明用户漏选了规格，直接提示并阻止提交即可，不用走后续变体匹配逻辑

原有HTML渲染结构不需要调整，只需要替换掉两段错误的script逻辑即可：

<div class="radios">
    {% for product_option in product.options_with_values %} 
        <p>{{ product_option.name }} -- </p>
    
        {% for value in product_option.values %}
            <input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
            <label for="{{ value }}">{{ value }}</label>  
        {% endfor %}
        <br>
    {% endfor %}
</div>
<div class="quantity-add">
    <div class="input-quantity">
        <input class="input-quantity" type="number" min="1" placeholder="1" name="quantity" value="1"> 
        <input type="hidden" id="add-cart" name="id" data-productid="{{ product.variants[0].id }}" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
    </div>
    <div class="cart-button">
        <button class="cart-btn" type="submit" value="Add To Cart">ADD</button> 

        <script>
            document.querySelector('.cart-btn').addEventListener('click', function (e) {
                // 实时收集当前所有选中的单选值，顺序和页面渲染的选项组顺序完全一致
                const selectedOptions = []
                const checkedRadios = document.querySelectorAll('.radios input[type="radio"]:checked')
                checkedRadios.forEach(radio => {
                    selectedOptions.push(radio.value)
                })

                // 校验是否选全所有选项
                const totalOptionGroups = document.querySelectorAll('.radios p').length
                if (selectedOptions.length !== totalOptionGroups) {
                    alert('请选择全部商品规格')
                    e.preventDefault() // 漏选时阻止表单提交
                    return
                }

                // 匹配对应变体ID
                let matchedVariantId = null
                for (let i = 0; i < variantsArray.length; i++) {
                    if (JSON.stringify(selectedOptions) === JSON.stringify(variantsArray[i].options)) {
                        matchedVariantId = variantsArray[i].id
                        break
                    }
                }

                if (matchedVariantId) {
                    document.querySelector('#add-cart').value = matchedVariantId
                    console.log('匹配到变体ID：', matchedVariantId)
                } else {
                    alert('所选规格无对应商品')
                    e.preventDefault()
                }
            })
        </script>
    </div>
</div>

• 这套逻辑不需要给单选按钮绑定额外的change/click事件，每次点加购都实时取最新值，完全不会有历史值残留的问题
• 因为Liquid渲染product.options_with_values的顺序，和商品数据里每个variant的options数组顺序完全一致，所以直接序列化字符串比对不会出现顺序不匹配的问题
• 如果后续需要做选择后实时显示变体价格/库存，再额外给单选按钮绑定change事件即可，核心取值逻辑和上面加购时的取值逻辑完全一致

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