jquery showhide问题

Question

我有2个单选按钮，选中后会显示相关的下拉列表并隐藏另一个。

问题是show / hide适用于单击，但如果我点击'Carparks'开始，则会出现Carparks下拉列表;然后选择“建筑物”，建筑物下降取代它;然而，如果我再次单击“停车场”，则建筑物下拉停留并且不会被替换。

似乎只能工作一次。

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>

Answer 1

尝试一次，同时从两个单选按钮中删除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');
    }
});

DEMO HERE

Answer 2

你可以更简单地做到这一点：
只需将您的DIV ID修改为与输入的值类似：

E.g：

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

的 LIVE DEMO

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