选中单选按钮时显示含子单选框的多个Div ID问题排查

我是前端新手，最近做一个表单，要求用户选择最近的城市（单选按钮），选中London时要显示三个带单选框的Div（每个Div的ID都是唯一的，没法合并）。现在的问题是：London对应的Div能正常显示，但点这些Div里的任何单选选项时，Div会自动隐藏，不管选哪一项。

现有代码 #

城市选择单选框HTML #

<label class="container" style="line-height: 1.5;">
      <input type="radio" id="NEAREST_CITY1" name="cd_NEAREST_CITY" value="London" initial="@NEAREST_CITY@" readonly="">
      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" initial="@NEAREST_CITY@" readonly="">
      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" initial="@NEAREST_CITY@" readonly="">
      Edinburgh
      <span class="radioSelect"></span>
    </label>

三个隐藏的Div #

Div 1

<div id="London1" style="display:none">
<p style="margin: 0px; line-height: 1.5; padding-top: 20px;"><font face="belleza, sans-serif"><font><font style="font-size: 16px;"><b>请选择您偏好的伦敦区域:</b></font></font></font></p>
</div>

Div 2

<div 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" initial="@PREFERRED_LONDON@" readonly="">
      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" initial="@PREFERRED_LONDON@" readonly="">
      Borough
      <span class="radioSelect"></span>
    </label>
</div>

Div 3

<div 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" initial="@PREFERRED_LONDON@" readonly="">
      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" initial="@PREFERRED_LONDON@" readonly="">
      Knightsbridge
      <span class="radioSelect"></span>
    </label>
</div>

现有JavaScript/jQuery代码 #

<script>
$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'NEAREST_CITY1') {
            $("div[id*=London]").show();           
       }
       else {
            $("div[id*=London]").hide();   
       }
   });
});
</script>

问题原因 #

你给所有单选框都绑定了click事件，包括London子Div里的那些单选按钮。当点击子单选框时，它的ID肯定不是NEAREST_CITY1，所以代码会执行else分支，把所有带London的Div都隐藏了。

解决方案 #

把事件绑定的范围缩小，只给城市选择组的单选框（name为cd_NEAREST_CITY的那些）绑定事件，不要影响子Div里的单选框。同时用val()判断选中的值比用ID更健壮，后续ID变化也不会影响逻辑。

修改后的JavaScript代码 #

<script>
$(document).ready(function() {
   // 只监听城市选择组的单选框
   $('input[name="cd_NEAREST_CITY"]').click(function() {
       if($(this).val() == 'London') {
            $("div[id*=London]").show();           
       }
       else {
            $("div[id*=London]").hide();   
       }
   });
});
</script>

内容的提问来源于stack exchange，提问作者Shantelle