jquery显示隐藏问题

我有两个单选按钮，选中后将显示相关下拉列表并隐藏另一个

问题是，单次单击“显示/隐藏”可以正常工作，但如果我单击“停车场”开始，则会出现“停车场”下拉列表；然后选择“建筑物”，建筑物下拉列表取代其位置；但是，如果我再次单击“停车场”，则“建筑物”下拉列表将保持不变，不会被替换

似乎只工作一次

function hide(){
if(document.getElementById('buildings').checked) {
    $('#carParkDiv').removeClass('show').addClass('hidden');
    $('#buildingDiv').removeClass('hidden').addClass('show');
    $('input:radio[id="carparks"]').prop('checked', false);
}else if(document.getElementById('carparks').checked) {
  $('#carParkDiv').removeClass('hidden').addClass('show');
    $('#buildingDiv').removeClass('show').addClass('hidden');
    $('input:radio[id="buildings"]').attr('checked', false);
}
}


<input type="radio" name="whereto" id="buildings"  value="buildings" onchange="hide();"><label for="buildings">Buildings</label>
    <input type="radio" name="whereto" id="carparks"  value="carparks" onchange="hide();"><label for="carparks">Carparks</label><br>

    <div id="buildingDiv" class="hidden">
    <select id="buildingList" name="buildingList" onchange="addLocation();">
     <option>Buildings</option>
     <option value="B1">B1</option>
     <option value="B12">B12</option>
    </select> 
    </div>
    <div id="carParkDiv" class="hidden">
    <select id="carParkList" name="carParkList" onchange="addLocation();">
     <option>Car Parks</option>
     <option value="Visitor">Visitor</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
    </select> 
    </div>

---

尝试此操作一次，同时从两个单选按钮中删除onchange属性：

$('input:radio').change(function () {
    if ($('#buildings').is(':checked')) {
        $('#carParkDiv').removeClass('show').addClass('hidden');
        $('#buildingDiv').removeClass('hidden').addClass('show');
    } else if ($('#carparks').is(':checked')) {
        $('#carParkDiv').removeClass('hidden').addClass('show');
        $('#buildingDiv').removeClass('show').addClass('hidden');
    }
});

---

您可以更简单地执行以下操作： 只需将DIV id修改为与输入值相似：

例如：

---

你能创建一个JSFIDLE吗？

<input type="radio" name="whereto" id="carparks" value="carparks">
<div id="carparksDiv" class="hidden">...</div>

$('[name=whereto]:input').change(function(){
  if(this.checked){
      $('#'+ this.value +'Div').show().siblings('.hidden').hide();
  } 
});