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

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