当“选中”单选按钮时，使用其他单选输入显示多个 div ID

Question

我在这里完全是新手 - 所以我会尽力解释。 我有一个表单，要求用户选择最近的城市（无线电输入），如果他们从选项中选择“伦敦”，那么我需要 3x div ID 来显示，其中包含一些其他无线电输入。我所有的代码都有唯一的 ID。

我遇到的问题是我可以显示 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 是这样的 - 我不能将这些放在 1 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>Let us know your preferred London Location:</b></font></font></font></p>
</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>

第 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>

Answer 1

这是一个清理版本。我已将事件侦听器更改为仅侦听 name=cd_NEAREST_CITY] 上的点击，否则任何广播上的任何点击都会触发切换

注意我给每个 div 一个 class="city" 以便能够一次性隐藏它们

$(function() {
  $('[name=cd_NEAREST_CITY]').on('click', function() {
    $('.city').hide()
    $(`div[id*=${this.value}]`).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY1" name="cd_NEAREST_CITY" value="London" 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"  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" readonly="">
      Edinburgh
      <span class="radioSelect"></span>
</label>

<div class="city" 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>Let us know your preferred London Location:</b></font>
      </font>
    </font>
  </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" 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"  readonly="">
      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" 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" readonly="">
      Knightsbridge
      <span class="radioSelect"></span>
    </label>
</div>