如何精确获取多组单选按钮的最终选中值

<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>

<!-- 假设这是用于存储中间选择值的脚本 -->
<script>
    var optionsArray = [];
    document.querySelector('.radios').addEventListener('click', function(e) {
        // 这种方式会捕获所有点击，包括中间状态的更改
        if (e.target.type === 'radio') {
            optionsArray.push(e.target.value);
            console.log("当前累积的选择:", optionsArray); // 会发现有重复和旧值
        }
    });
</script>

<!-- HTML 结构：多组产品变体单选按钮 -->
<div class="radios">
    <!-- 假设 product.options_with_values 是一个包含多个选项组的数组 -->
    {% for product_option in product.options_with_values %} 
        <p>{{ product_option.name }} -- </p>
        {% for value in product_option.values %}
            <!-- 确保每个选项组的name属性是唯一的，以实现互斥选择 -->
            <input type="radio" id="{{ product_option.name | slugify }}-{{ value | slugify }}" name="{{ product_option.name }}" value="{{ value }}" 
                   {% if loop.first %}checked{% endif %}> <!-- 可以设置默认选中项 -->
            <label for="{{ product_option.name | slugify }}-{{ value | slugify }}">{{ 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"> 
        <!-- 假设这里有一个隐藏字段用于存储变体ID，初始值可以为默认变体的ID -->
        <input type="hidden" id="add-cart-variant-id" 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="button" value="Add To Cart">添加到购物车</button> 
    </div>
</div>

<script>
    // 假设 variantsArray 是一个包含所有产品变体信息的数组，每个变体包含其options和id
    // 例如：[{ options: ['S', '棉', '红'], id: 'variant_123' }, ...]
    const variantsArray = [
        { options: ['S', '棉', '红'], id: 'variant_101' },
        { options: ['M', '棉', '红'], id: 'variant_102' },
        { options: ['S', '涤纶', '蓝'], id: 'variant_103' },
        // ...更多变体
    ];

    document.querySelector('.cart-btn').addEventListener('click', function () {
        // 1. 获取所有当前选中的单选按钮元素
        const checkedRadios = document.querySelectorAll('input[type="radio"]:checked');

        // 2. 从选中元素中提取它们的value属性，形成一个数组
        const selectedOptionValues = Array.from(checkedRadios, radio => radio.value);

        console.log("用户最终选择的选项值:", selectedOptionValues);

        // 3. 使用这些值来匹配产品变体ID
        let matchedVariantId = null;
        for (let i = 0; i < variantsArray.length; i++) {
            // 注意：比较数组时，需要确保顺序一致或进行排序后再比较
            // 这里假设 variantsArray.options 和 selectedOptionValues 的顺序是匹配的
            // 更严谨的做法是先对两者进行排序，或者将它们转换为Set进行比较
            if (JSON.stringify(selectedOptionValues.sort()) === JSON.stringify(variantsArray[i].options.sort())) {
                matchedVariantId = variantsArray[i].id;
                console.log('匹配到变体ID:', matchedVariantId);
                break; // 找到匹配项后退出循环
            }
        }

        // 4. 更新隐藏字段的值，或直接发送到后端
        if (matchedVariantId) {
            document.querySelector('#add-cart-variant-id').value = matchedVariantId;
            // 此时可以执行添加到购物车的逻辑，例如通过AJAX发送数据
            console.log('准备将产品变体ID ' + matchedVariantId + ' 添加到购物车');
            // 例如：addToCartFunction(matchedVariantId, quantity);
        } else {
            console.warn('未找到匹配的产品变体，请检查选择的选项。');
            alert('请选择有效的商品变体！');
        }
    });
</script>