jquery showhide issue

Question

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

问题是显示/隐藏对单击很好，但是如果我点击'停车场'开始，停车场下拉菜单出现;然后选择'建筑物'，建筑物下降取而代之;然而，如果我再点击“停车场”，建筑物下拉菜单仍然保留并且不会被替换。

似乎只能工作一次。

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

你可以做到这一点muuuuuch更简单地说：
只需修改您的DIV ID来类似于您输入的值：

例如：

<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(); 
    } 
});