本文详解如何使用 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}"])结果，但本例规模下无需过度优化。
此方案兼顾健壮性、可维护性与可扩展性，是表单条件显示场景的标准实践。
