本文介绍如何通过 jQuery 监听特定名称的单选按钮（radio）点击事件，精准控制多个关联 的显隐状态——仅在用户选择“London”时显示其专属选项区块，避免因其他 radio 交互导致误隐藏。
本文介绍如何通过 jquery 监听特定名称的单选按钮（radio）点击事件，精准控制多个关联 `
` 的显隐状态——仅在用户选择“London”时显示其专属选项区块，避免因其他 radio 交互导致误隐藏。
在构建多步骤或地域化表单时，常需根据用户选择动态加载后续选项。本例中，当用户从“London”“Manchester”“Edinburgh”三个城市中选择“London”时，应显示三组预设的伦敦子选项区块（#London1、#London2、#London3）；而选择其他城市时，这些区块必须全部隐藏。原始代码的问题在于：监听了所有 radio 元素的点击事件，导致用户在 cd_PREFERRED_LONDON 分组内切换选项时也会触发隐藏逻辑，造成体验中断。
✅ 正确实现思路
关键在于精确限定事件作用域：只监听 name="cd_NEAREST_CITY" 这一组城市选择按钮，而非页面所有 radio。同时，为所有待控 <div> 统一添加语义化类名（如 <code>class="city"），便于批量操作。
✅ 推荐 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() {
// 1. 先隐藏所有 .city 区块
$('.city').hide();
// 2. 根据当前选中的 value（如 "London"），显示所有 id 包含该值的 div
$(`div[id*="${this.value}"]`).show();
});
});
</script>
⚠️ 注意事项与最佳实践
-
移除
readonly属性：<input type="radio">不支持readonly，它会阻止用户交互；若需禁用，请用disabled（但此时无法触发click事件），或通过 CSS/JS 控制逻辑。 -
避免内联样式：示例中保留了
style仅为演示清晰，生产环境请将样式迁移至<style></style>或外部 CSS 文件，提升可维护性。 -
ID 命名建议：确保
id值不包含空格或特殊字符（如London 1无效），当前London1/London2符合规范。 -
扩展性增强：若未来增加 “Paris”、“Berlin” 等城市，只需新增对应
id="Paris1"等区块，并保持class="city"即可自动兼容，无需修改 JS。 -
无障碍考虑：确保
<label></label>正确包裹<input>或使用for属性关联，提升屏幕阅读器支持。
通过以上结构化实现，你将获得一个响应精准、易于扩展、且不影响子选项正常交互的动态表单模块。
