如何基于两组单选框的选中状态自动勾选对应组合单选框

解决方案 #

你只需要把这段原生JS代码放到页面的<script>标签中即可生效，不需要修改现有HTML结构：

// 封装组合匹配逻辑
function matchCombination() {
  // 读取当前选中的颜色值
  const selectedColor = document.querySelector('input[name="product_color"]:checked')?.value;
  // 读取当前选中的宝石值
  const selectedStone = document.querySelector('input[name="product_stone"]:checked')?.value;
  // 两个选项都有选中值才执行匹配
  if (!selectedColor || !selectedStone) return;

  // 遍历所有组合单选框
  document.querySelectorAll('input[name="combination"]').forEach(comboRadio => {
    // 匹配data属性与选中值
    if (comboRadio.dataset.color === selectedColor && comboRadio.dataset.stone === selectedStone) {
      comboRadio.checked = true;
      // 如果你需要拿到对应handle值，可以在这里读取comboRadio.dataset.handle
    }
  })
}

// 给颜色、宝石单选框绑定切换事件，选项变化时自动匹配组合
document.querySelectorAll('input[name="product_color"], input[name="product_stone"]').forEach(radio => {
  radio.addEventListener('change', matchCombination);
})

// 页面加载完成后自动匹配一次默认选中的选项
document.addEventListener('DOMContentLoaded', matchCombination);

代码说明

• 用:checked选择器直接获取选中的单选框，不需要遍历整组单选框判断选中状态，写法更简洁
• dataset是JS原生读取自定义data-*属性的API，data-color对应dataset.color，data-stone对应dataset.stone
• 初始加载自动执行一次匹配，适配页面默认就有选中选项的场景
• 如果需要处理选中组合不存在的场景，可以加判断逻辑，匹配不到对应单选框时给用户提示即可

内容的提问来源于stack exchange，提问作者Sunny