JavaScript 多级单选按钮的动态联动与默认选中处理

本文详解如何实现多级单选按钮（如一级分类控制二级选项显隐）的健壮交互逻辑，解决因 dom 状态不同步导致的“二次切换后二级按钮值为 null”问题，并提供简洁、可维护的事件委托方案。

在构建多级单选按钮（例如：一级选择「Graphics」类别 A1/A2/A3，二级根据所选动态显示对应「Display」选项 B1–B4）时，一个常见陷阱是：UI 显示已选中某二级项（如 B3），但程序读取其 value 时返回 null 或 undefined。根本原因并非 HTML 结构错误，而是 JavaScript 未同步更新隐藏/显示容器内 的选中状态，且缺乏对“回退到先前一级选项时自动恢复对应二级默认项”的主动干预。

以下是一个生产就绪的解决方案，采用事件委托 + CSS 类驱动 + 语义化结构，彻底规避 null 值问题：

✅ 核心思路

• 使用 click 事件委托监听整个表单，避免为每个单选按钮重复绑定；
• 利用 closest() 和 matches() 精准定位层级关系（.ggrp 为一级组，.dgrp 为二级容器）；
• 关键修复：每次一级选项变更后，不仅显示对应 .dgrp > div，还立即触发其内部首个 的 .click() —— 这确保 DOM 状态与 UI 完全一致，杜绝“视觉已选但 JS 未感知”的竞态；
• 通过 label.checked 类统一管理视觉反馈，解耦样式与逻辑。

? 完整实现代码

  

    
Graphics
    
       A1
       A2
       A3
    
  
  

    
Display
    
       B1
       B2
       B3
       B4
    
  

⚠️ 注意事项

• 不要依赖 change 事件：change 在 radio 从 false→true 时才触发，而 click 更及时，且能捕获用户点击瞬间；
• 避免 display: none 与 hidden 混用：本方案统一用 hidden 属性 + CSS 控制显隐，语义清晰且兼容性好；
• 确保二级 的 class 名与一级 id 严格对应（如 对应 id="A2"），这是动态匹配的依据；
• 如需获取当前完整选择，可通过 document.querySelector('input[name="gfx"]:checked')?.value 和 document.querySelector('input[name="dsp"]:checked')?.value 安全读取 —— 此时绝不会返回 null。

该方案已在 JSFiddle 示例 中验证，完美复现并修复了「A2 → B3 → A3 → A2」路径下的 null 值缺陷，代码精简、逻辑清晰、易于扩展多级结构。