场景描述与挑战
在电子商务网站中，产品通常会有多种变体选项，例如一件T恤可能有“尺寸”（S, M, L）、“材质”（棉，涤纶）和“颜色”（红，蓝，绿）等多个单选按钮组。当用户选择这些选项并点击“添加到购物车”按钮时，我们需要准确地获取每个选项组中用户最终选择的值，以便匹配正确的产品变体ID并将其加入购物车。
一个常见的误区是为每个单选按钮添加点击事件监听器，并在每次点击时将值存储到数组中。这种方法的问题在于，如果用户反复更改某个选项组的选择（例如，从“S”改为“M”，再改回“S”），数组中会累积所有中间选择的值，导致数据冗余和错误。我们真正需要的是在用户点击“添加到购物车”这一最终确认操作时，一次性获取所有选项组的当前选中值。
传统方法的局限性
让我们先看一个可能导致问题的初始实现思路：
{% for product_option in product.options_with_values %}{{ product_option.name }} --
{% for value in product_option.values %} {% endfor %}
{% endfor %}
上述代码中，optionsArray 会在用户每次点击任何一个单选按钮时添加值。如果用户从“尺寸：S”切换到“尺寸：M”，optionsArray 可能会包含 ['S', 'M']，这显然不是我们期望的最终状态。我们希望的是在用户最终确定所有选项后，点击“添加到购物车”时，只获取 ['M', '棉', '蓝'] 这样的最终组合。
最佳实践：在提交时查询选中状态
解决上述问题的关键在于，将获取选中值的逻辑绑定到“添加到购物车”按钮的点击事件上，而不是单个单选按钮的点击事件。这样，在用户点击提交时，我们可以查询DOM中所有单选按钮的当前选中状态。
核心JavaScript方法
JavaScript提供了document.querySelectorAll()方法，结合CSS选择器:checked，可以非常方便地实现这一目标。
- document.querySelectorAll('input[type="radio"]:checked'): 这个选择器会返回一个NodeList，其中包含页面上所有类型为radio且当前处于选中状态的元素。
- Array.from(NodeList, mapFunction): 由于querySelectorAll返回的是NodeList而不是标准数组，我们可以使用Array.from()将其转换为数组，并同时通过映射函数提取每个选中单选按钮的value属性。
完整代码示例
下面是一个将上述核心方法整合到“添加到购物车”流程中的完整示例：
{% for product_option in product.options_with_values %}{{ product_option.name }} --
{% for value in product_option.values %} {% endfor %}
{% endfor %}
注意事项：
- name 属性的重要性：确保每个单选按钮组（例如“尺寸”、“颜色”）拥有唯一的name属性。这是浏览器实现单选互斥的关键。例如，所有“尺寸”单选按钮的name都应是"尺寸"。
- 默认选中项：为了提供更好的用户体验，建议为每个单选按钮组设置一个默认选中项（例如使用checked属性），尤其是在页面加载时。
- 匹配逻辑的严谨性：在比较selectedOptionValues和variantsArray[i].options时，如果这两个数组的元素顺序不总是固定的，直接使用JSON.stringify()进行比较可能导致错误。更健壮的方法是先对两个数组进行排序，或者将它们转换为Set再进行比较，以确保只比较其包含的元素是否相同，而不关心顺序。在示例中，我添加了.sort()来增强比较的严谨性。
- 用户反馈与验证：如果用户选择的组合没有匹配到任何现有变体，应给予用户明确的反馈（例如提示信息或禁用“添加到购物车”按钮）。
- 数量输入：在实际应用中，通常还需要获取用户输入的购买数量，并与变体ID一同发送到后端。
总结
通过将获取单选按钮选中值的逻辑绑定到最终提交按钮的点击事件上，并利用document.querySelectorAll('input[type="radio"]:checked')和Array.from()方法，我们可以高效、准确地捕获用户最终确认的选择。这种方法避免了处理中间状态的复杂性，确保了数据的一致性，是处理多组单选按钮场景的推荐实践。在实现过程中，务必关注name属性的正确使用、匹配逻辑的严谨性以及用户体验的优化。
