如何基于单选按钮选择动态显示关联的多个 DIV 元素-js教程-PHP中文网

如何基于单选按钮选择动态显示关联的多个 DIV 元素

本文详解如何使用 jquery 精准监听指定名称的单选按钮（radio）点击事件，仅在用户选择特定城市（如 london）时显示对应的一组带 id 的 div，避免因其他 radio 交互导致误隐藏。

本文详解如何使用 jquery 精准监听指定名称的单选按钮（radio）点击事件，仅在用户选择特定城市（如 london）时显示对应的一组带 id 的 div，避免因其他 radio 交互导致误隐藏。

在表单开发中，常需实现“条件显示”逻辑：当用户选择某个主选项（如城市），动态展示与其强相关的子选项区域。本例中，用户从 cd_NEAREST_CITY 组中选择 “London”，应显示三个独立的、ID 以 London 开头的 <div>（即 <code>London1、London2、London3），而选择 Manchester 或 Edinburgh 时则全部隐藏。

原始代码的问题在于：
✅ 使用了过于宽泛的选择器 $('input[type="radio"]') —— 任何 radio 点击（包括子选项 cd_PREFERRED_LONDON）都会触发显示/隐藏逻辑，导致刚点开的 London 子选项立即被隐藏；
❌ 缺乏统一管理机制，每个 div 单独控制易出错且难以维护；
❌ readonly 属性不适用于 <input type="radio">，会阻碍用户交互，必须移除。

✅ 正确解法：精准委托 + 语义化分组

核心思路是：只监听主城市单选组的变更，用统一 class 标识目标容器，并通过 value 动态匹配 ID 前缀。

1. HTML 结构优化（关键改动）

为所有需条件显示的 <div> 添加公共类名（如 <code>class="city"），便于批量控制；
移除所有 radio 的 readonly 属性；
将内联样式逐步迁移至 CSS 文件（本文保留 inline 以便演示，但生产环境强烈建议抽离）：

<!-- 主城市选择区 -->
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY1" name="cd_NEAREST_CITY" value="London">
  London <span class="radioSelect"></span>
</label>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY2" name="cd_NEAREST_CITY" value="Manchester">
  Manchester <span class="radioSelect"></span>
</label>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY3" name="cd_NEAREST_CITY" value="Edinburgh">
  Edinburgh <span class="radioSelect"></span>
</label>

<!-- 条件显示区域（全部添加 class="city"） -->
<div class="city" id="London1" style="display:none">
  <p style="margin:0; line-height:1.5; padding-top:20px; font-family:belleza,sans-serif;">
    <b style="font-size:16px;">Let us know your preferred London Location:</b>
  </p>
</div>

<div class="city" id="London2" style="display:none">
  <label class="container" style="line-height:1.5;">
    <input type="radio" id="PREFERRED_LONDON1" name="cd_PREFERRED_LONDON" value="Air Street">
    Air Street <span class="radioSelect"></span>
  </label>
  <label class="container" style="line-height:1.5;">
    <input type="radio" id="PREFERRED_LONDON2" name="cd_PREFERRED_LONDON" value="Borough">
    Borough <span class="radioSelect"></span>
  </label>
</div>

<div class="city" id="London3" style="display:none">
  <label class="container" style="line-height:1.5;">
    <input type="radio" id="PREFERRED_LONDON3" name="cd_PREFERRED_LONDON" value="Guildhall">
    Guildhall <span class="radioSelect"></span>
  </label>
  <label class="container" style="line-height:1.5;">
    <input type="radio" id="PREFERRED_LONDON4" name="cd_PREFERRED_LONDON" value="Knightsbridge">
    Knightsbridge <span class="radioSelect"></span>
  </label>
</div>

2. jQuery 脚本（简洁可靠）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
$(function() {
  // 仅监听 name="cd_NEAREST_CITY" 的 radio 点击
  $('[name="cd_NEAREST_CITY"]').on('click', function() {
    // 一步隐藏所有 .city 容器
    $('.city').hide();

    // 根据当前选中项的 value（如 "London"），显示所有 ID 包含该值的 div
    $(`div[id*="${this.value}"]`).show();
  });
});
</script>

? 关键点解析：

$('[name="cd_NEAREST_CITY"]') 确保事件仅绑定到主城市选择组，子选项 radio 完全无影响；

$('.city').hide() 统一收起所有条件区块，避免状态残留；

$(`div[id*="${this.value}"]`) 利用属性包含选择器（[id*=...]）匹配所有 ID 中含有当前城市名的 div（如 London1、London2），天然支持多区块联动。

⚠️ 注意事项与最佳实践

ID 命名一致性：确保所有需联动的 div ID 都以所选城市名开头（如 London1, London2, Manchester1），否则无法匹配；
避免 ID 冲突：若未来扩展其他城市（如 New York），其关联 div ID 应为 NewYork1、NewYork2，注意空格与大小写（id*= 区分大小写）；
无障碍增强：可为 .city 容器添加 aria-hidden="true" 并在 show() 时同步更新为 "false"；
性能提示：对于大量 DOM 元素，可预先缓存 $('.city') 和 $(div[id*="${val}"]) 结果，但本例规模下无需过度优化。

此方案兼顾健壮性、可维护性与可扩展性，是表单条件显示场景的标准实践。