本文详解如何实现多级单选按钮（如一级分类控制二级选项显隐）的健壮交互逻辑，解决因 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 类统一管理视觉反馈，解耦样式与逻辑。
? 完整实现代码
<form class="fltr">
<fieldset>
<legend>Graphics</legend>
<div style="display: flex;" class="ggrp">
<label class="checked"><input id="A1" name="gfx" type="radio" value="A1" checked /> A1</label>
<label><input id="A2" name="gfx" type="radio" value="A2" /> A2</label>
<label><input id="A3" name="gfx" type="radio" value="A3" /> A3</label>
</div>
</fieldset>
<fieldset>
<legend>Display</legend>
<div style="display: flex;" class="dgrp">
<div class="A1"><label class="checked"><input id="B1" name="dsp" type="radio" value="B1" checked /> B1</label></div>
<div class="A1 A2"><label><input id="B2" name="dsp" type="radio" value="B2" /> B2</label></div>
<div class="A2"><label><input id="B3" name="dsp" type="radio" value="B3" /> B3</label></div>
<div class="A3"><label><input id="B4" name="dsp" type="radio" value="B4" /> B4</label></div>
</div>
</fieldset>
</form>
<style>
.fltr label.checked {
border: 2px solid #44D62C;
color: #44D62C;
padding: 4px 8px;
border-radius: 4px;
}
.dgrp div { display: none; }
.dgrp div[hidden] { display: none !important; }
</style>
<script>
const filterForm = document.querySelector('form.fltr');
filterForm.addEventListener('click', (e) => {
const tgt = e.target;
if (!tgt.matches('[type=radio]')) return;
// 同步更新一级 label 视觉状态
const parent = tgt.closest('div');
parent.querySelectorAll('input').forEach(rad =>
rad.closest('label').classList.toggle('checked', rad.checked)
);
// 若非一级分组（.ggrp），直接退出
if (!parent.matches('.ggrp')) return;
// 隐藏所有二级项，仅显示匹配当前一级 ID 的 div，并自动选中其首个 radio
document.querySelectorAll('.dgrp div').forEach(div => {
div.hidden = !div.matches(`.${tgt.id}`);
if (!div.hidden) {
const firstRadio = div.querySelector('input');
if (firstRadio && !firstRadio.checked) {
firstRadio.click(); // 强制触发选中，确保 state 与 UI 同步
}
}
});
});
</script>⚠️ 注意事项
- 不要依赖 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 值缺陷，代码精简、逻辑清晰、易于扩展多级结构。
