本文介绍如何通过 jquery 精准监听城市选择单选按钮（name="cd_nearest_city"），仅在用户选择特定值（如 london）时显示对应的一组带 id 的 div，避免因其他 radio 交互导致误隐藏。
本文介绍如何通过 jquery 精准监听城市选择单选按钮（name="cd_nearest_city"），仅在用户选择特定值（如 london）时显示对应的一组带 id 的 div，避免因其他 radio 交互导致误隐藏。
在表单开发中，常需实现“条件显示”逻辑：当用户选择某个主选项（如城市）时，动态展开一组关联的子选项区域。本教程以“选择 nearest city → 显示对应伦敦地点子选项”为例，提供健壮、可扩展的实现方案。
✅ 核心问题与优化思路
原始代码使用 $('input[type="radio"]').click(...) 全局监听所有单选按钮，导致：
- 用户点击子选项（如
cd_PREFERRED_LONDON）时也会触发隐藏逻辑； - 无法区分主控项与从属项，造成 UI 闪烁或意外收起。
关键优化点：
-
精准事件委托：仅监听
name="cd_NEAREST_CITY"的点击； -
统一控制类名：为所有待切换的 DIV 添加通用类（如
class="city"），便于批量操作； -
动态 ID 匹配：利用
this.value获取当前选中值（如"London"），再通过属性选择器div[id*="London"]安全匹配相关 DIV； -
移除无效属性：
readonly不适用于<input type="radio">，已删除以确保语义正确性。
✅ 推荐 HTML 结构（精简 + 语义化）
<!-- 主城市选择区 -->
<label class="container" style="line-height: 1.5;">
<input type="radio" name="cd_NEAREST_CITY" value="London">
London <span class="radioSelect"></span>
</label>
<label class="container" style="line-height: 1.5;">
<input type="radio" name="cd_NEAREST_CITY" value="Manchester">
Manchester <span class="radioSelect"></span>
</label>
<label class="container" style="line-height: 1.5;">
<input type="radio" 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" 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" 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" name="cd_PREFERRED_LONDON" value="Guildhall">
Guildhall <span class="radioSelect"></span>
</label>
<label class="container" style="line-height: 1.5;">
<input type="radio" name="cd_PREFERRED_LONDON" value="Knightsbridge">
Knightsbridge <span class="radioSelect"></span>
</label>
</div>
✅ 稳健的 jQuery 实现（兼容现代浏览器）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
$(function() {
// 仅监听主城市单选按钮的点击
$('[name="cd_NEAREST_CITY"]').on('click', function() {
// 先隐藏所有 .city 区域
$('.city').hide();
// 再根据当前选中的 value（如 "London"）显示对应 div
const targetValue = this.value;
$(`div[id*="${targetValue}"]`).show();
});
});
</script>
⚠️ 注意事项与最佳实践
-
ID 命名建议：确保
id值与value严格一致（如value="London"对应id="London1"），避免空格或特殊字符； -
样式解耦：将
style属性移至 CSS 文件，提升可维护性（例如.city { display: none; }）； -
无障碍增强：为动态显示区域添加
aria-live="polite"，帮助屏幕阅读器感知内容变化； -
扩展性提示：若后续需支持多城市（如 Manchester2/Manchester3），只需保持
id包含城市名即可复用同一逻辑； -
无 jQuery 替代方案：如需原生 JS，可用
document.querySelectorAll('[name="cd_NEAREST_CITY"]').forEach(...)+element.classList.toggle()实现。
此方案兼顾简洁性与鲁棒性，彻底规避子选项干扰，是表单条件显示场景的标准实践。
