单击按钮时，将不同组中的选定单选按钮值存储

Question

我正在为产品变体选项提供不同的无线电按钮。 （例如：T恤可以具有3个不同的单选按钮组：尺寸，材料，颜色）。现在，我正在尝试将用户选择的单选按钮值存储在数组中，并将产品变体添加到购物车中。我正在通过无线电按钮上的onclick事件存储这些值。但是，因此，如果我将尺寸的选择从XS更改为S，则XS和S值都将添加到我的数组中。但是我只需要在数组中存储最终的单选按钮值，以便我可以将其与JSON数据进行比较并找到变体ID。因此，我试图将所有选定的无线电按钮值存储在添加到购物车按钮上的ONCLICK事件，这样，它将仅存储最终选择的单选按钮值。但是，我不确定如何访问此部分中不同组的所有单选按钮值。任何帮助将不胜感激。到目前为止，这是我的代码：

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

                  <script>
                         var optionsArray = [];
                         var filteredOptionsArray = [];
                          document.querySelector('.radios').addEventListener('click', function(e) {
                          optionsArray.push(e.target.value);
                          filteredOptionsArray = optionsArray.filter(function (el) {
                            return el != null;
                           });
                           console.log(filteredOptionsArray);
                        //   console.log(optionsArray.toString());
                      })
                  </script>
                </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 for adding the selected variant to the cart -->
                <script>
                    document.querySelector('.cart-btn').addEventListener('click', function () {
                        for (let i=0; i < variantsArray.length; i++) {
                            if ((JSON.stringify(filteredOptionsArray))== (JSON.stringify(variantsArray[i].options))) {
                                console.log('stringify match check works');
                                console.log(variantsArray[i].options);
                                document.querySelector('#add-cart').value = variantsArray[i].id;
                            }
                            else {
                                console.log('stringify match check failed');
                                console.log(variantsArray[i].options);
                            }
                        }
                    })
                </script>
            </div>

Answer 1

发现它，我需要这样做：

const checkedRadios = document.querySelectorAll('input[type="radio"]:checked');
const radio_values = Array.from(checkedRadios, radio => radio.value);