多级单选按钮（Multi Level radio buttons）切换后二级值空UI显示异常求助

问题核心 #

切换一级单选按钮后切回原选项时，二级单选按钮的HTML已标记checked但UI未显示选中状态，且获取值为null。复现路径：选择A2 → 选择B3 → 选择A3 → 选择A2。

问题原因 #

1. 未保存用户之前选中的二级选项，每次切回一级选项都强制选中第一个二级单选，覆盖了用户之前的选择
2. 隐藏元素设置checked属性后，浏览器未触发UI重绘，导致DOM状态与显示状态不一致

修复步骤 #

1. 新增二级选中状态存储 #

用对象记录每个一级选项对应的二级选中值，避免切换时丢失用户选择：

const selectedSecondary = {};

2. 修改一级单选切换逻辑 #

切换一级选项时，优先读取已保存的二级选中值，无保存值时再选第一个；设置选中后手动触发change事件强制UI更新：

document.querySelectorAll('input[name="primary"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const primaryVal = this.value;
    // 隐藏所有二级组
    document.querySelectorAll('.secondary-group').forEach(g => g.style.display = 'none');
    // 显示目标二级组
    const targetGroup = document.querySelector(`.secondary-group[data-primary="${primaryVal}"]`);
    if (targetGroup) {
      targetGroup.style.display = 'block';
      const secondaryRadios = targetGroup.querySelectorAll('input[name="secondary"]');
      let targetRadio;
      // 优先使用保存的选中值
      if (selectedSecondary[primaryVal]) {
        targetRadio = targetGroup.querySelector(`input[value="${selectedSecondary[primaryVal]}"]`);
      }
      // 无保存值则选第一个
      targetRadio = targetRadio || secondaryRadios[0];
      
      if (targetRadio) {
        targetRadio.checked = true;
        // 手动触发change事件，同步UI与DOM状态
        targetRadio.dispatchEvent(new Event('change'));
      }
    }
  });
});

3. 监听二级单选事件，保存选中值 #

用户选择二级选项时，将对应关系存入存储对象：

document.querySelectorAll('input[name="secondary"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const primaryVal = this.closest('.secondary-group').dataset.primary;
    selectedSecondary[primaryVal] = this.value;
    // 这里可添加业务逻辑，比如打印选中值
    console.log('选中组合：', primaryVal, this.value);
  });
});

4. 初始化触发默认选中 #

页面加载时，触发默认选中的一级单选的change事件，确保初始状态正确：

document.querySelector('input[name="primary"]:checked')?.dispatchEvent(new Event('change'));

效果验证 #

按复现路径操作后，切回A2时会自动选中之前选择的二级选项，UI显示与DOM状态一致，能正常获取选中值。

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