如何正确实现多层嵌套单选按钮的级联显示逻辑

本文详解 jquery 中处理多级嵌套 radio 按钮时 `.shown` 类失效的根本原因——css 层叠顺序冲突，并提供可复用的结构化解决方案，确保子级选项（如 tier i/ii move）能按需精准显示。

在构建具有层级关系的表单（如“主操作 → 子操作 → 具体配置”）时，开发者常采用嵌套

+ radio 的方式组织 UI。但当尝试为二级单选组（如 Move Contents 下的 Tier I move / Tier II move）添加独立显隐控制逻辑时，常见问题浮现：点击子级 radio 按钮后，对应 .subtier2-options 区域无法显示。

根本原因在于 CSS 层叠（cascade）优先级冲突：
原始 CSS 中，.shown { display: block; } 定义在 .subtier2-options { display: none; } 之前。由于二者选择器特异性（specificity）相同（均为 class），后声明的样式会覆盖先声明的。但关键在于：.subtier2-options 是元素的初始类，而 .shown 是运行时动态添加的类。当浏览器解析样式时，若 .subtier2-options 规则在 .shown 之后，即使 JS 成功添加了 .shown，其 display: block 仍会被后续加载的 .subtier2-options { display: none } 覆盖，导致视觉上“不显示”。

✅ 正确解法：调整 CSS 声明顺序，确保通用隐藏规则在前，状态类（.shown）在后：

/* 先定义所有层级的默认隐藏状态 */
.tier2-options,
.subtier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #eee;
}

/* 再定义统一的显示状态类 —— 必须放在所有具体层级类之后 */
.shown {
  display: block !important; /* 可选：加 !important 进一步确保优先级 */
}

同时，JavaScript 逻辑需保持职责清晰、互不干扰：

// 主层级控制：.tier1-options → .tier2-options
$(".tier1-options :radio").on("change", function () {
  // 隐藏所有一级子选项，并清空其内部表单值
  $(".tier2-options")
    .removeClass("shown")
    .find("input, select, textarea").val("");

  // 显示当前选中项关联的一级子区域
  $(this).closest(".tier1-options").find(".tier2-options").addClass("shown");
});

// 子层级控制：.subtier1-options → .subtier2-options
$(".subtier1-options :radio").on("change", function () {
  // 隐藏所有二级子选项，并清空其内部表单值
  $(".subtier2-options")
    .removeClass("shown")
    .find("input, select, textarea").val("");

  // 显示当前选中项关联的二级子区域
  $(this).closest(".subtier1-options").find(".subtier2-options").addClass("shown");
});

? 关键注意事项：

• 使用 .closest() 替代 .parents() 更精准（避免匹配到更外层无关祖先）；
• 清空操作应覆盖 textarea 和 select（原代码遗漏 textarea）；
• 若存在更多层级（如三级），遵循相同模式：定义 .tier3-options { display: none }，并新增对应事件监听器；
• 推荐为不同层级使用语义化命名（如 data-tier="1"），便于后期维护与扩展；
• 现代项目建议迁移到原生 JavaScript（addEventListener + classList.toggle）或框架（React/Vue）以提升可维护性。

该方案通过规范 CSS 层叠顺序与分离 DOM 作用域，彻底解决多层 radio 级联显示失效问题，兼顾兼容性与可读性，是表单动态交互的经典实践范式。