从多个单选按钮组中高效获取用户最终选择值

<div class="product-options">
    <!-- 尺寸选项组 -->
    <p>尺寸:</p>
    <div>
        <input type="radio" id="size-s" name="尺寸" value="S" checked>
        <label for="size-s">S</label>
        <input type="radio" id="size-m" name="尺寸" value="M">
        <label for="size-m">M</label>
        <input type="radio" id="size-l" name="尺寸" value="L">
        <label for="size-l">L</label>
    </div>

    <!-- 颜色选项组 -->
    <p>颜色:</p>
    <div>
        <input type="radio" id="color-red" name="颜色" value="红色">
        <label for="color-red">红色</label>
        <input type="radio" id="color-blue" name="颜色" value="蓝色" checked>
        <label for="color-blue">蓝色</label>
        <input type="radio" id="color-green" name="颜色" value="绿色">
        <label for="color-green">绿色</label>
    </div>
</div>

<button id="add-to-cart-btn">添加到购物车</button>

document.getElementById('add-to-cart-btn').addEventListener('click', function () {
    // 1. 选中所有当前处于选中状态的单选按钮
    // 这将返回一个NodeList，包含所有 type="radio" 且当前被选中的 input 元素
    const checkedRadios = document.querySelectorAll('input[type="radio"]:checked');

    // 2. 从选中的单选按钮中提取值，并存入一个数组
    // Array.from() 方法将 NodeList 转换为真正的数组，并映射每个元素的 value 属性
    const selectedOptionValues = Array.from(checkedRadios, radio => radio.value);

    console.log('用户最终选择的选项值:', selectedOptionValues);
    // 示例输出: 如果用户选择了 M 码和蓝色，则输出 ['M', '蓝色']

    // 3. 后续处理：例如，根据这些值查找产品变体ID
    // 假设我们有一个包含所有产品变体信息的数组 variantsArray
    // 每个变体对象可能包含一个 options 数组，如 { id: 'v1', options: ['M', '蓝色'] }
    // 实际应用中，variantsArray可能来自后端API或页面初始化时的JS变量
    const variantsArray = [
        { id: 'variant-001', options: ['S', '红色'] },
        { id: 'variant-002', options: ['M', '红色'] },
        { id: 'variant-003', options: ['S', '蓝色'] },
        { id: 'variant-004', options: ['M', '蓝色'] }
        // ...更多变体
    ];

    if (variantsArray && selectedOptionValues.length > 0) {
        // 为了确保比较的健壮性，通常需要对选项数组进行排序，以避免顺序不同但内容相同的数组被误判
        const sortedSelectedOptions = [...selectedOptionValues].sort();

        const matchedVariant = variantsArray.find(variant => {
            const sortedVariantOptions = [...variant.options].sort();
            return JSON.stringify(sortedVariantOptions) === JSON.stringify(sortedSelectedOptions);
        });

        if (matchedVariant) {
            console.log('找到匹配的变体ID:', matchedVariant.id);
            // 可以在此处将匹配到的变体ID赋值给隐藏的输入框，以便表单提交
            // document.getElementById('hidden-variant-id-input').value = matchedVariant.id;
            // 接着可以执行添加到购物车的AJAX请求等操作
        } else {
            console.log('未找到匹配的变体。请检查选项组合。');
            // 可以向用户显示错误消息
        }
    } else {
        console.log('请选择所有必要的选项。');
        // 提示用户完成所有必选选项
    }
});