根据单选按钮单击显示和隐藏 div [重复]

我希望能够使用单选按钮和 jQuery - HTML 动态更改显示的 div：

  <div id="myRadioGroup">

2 Cars<input type="radio" name="cars" checked="checked" value="2"  />

3 Cars<input type="radio" name="cars" value="3" />

<div id="twoCarDiv">
2 Cars Selected
</div>
<div id="threeCarDiv">
3 Cars
</div>
</div>

和 jQuery：

     <script>
$(document).ready(function(){ 
    $("input[name$='cars']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});
</script>

这什么也不做，div 总是显示。我确信这很简单，但我不擅长 jQuery 。

你走在正确的道路上，但你忘记了两件事：

1. add the desc类到你的描述div
2. 您有以下数值input但文本为id.

我已经修复了上面的问题，并在最初添加了一行hide() the third描述部分

实际操作看看——http://jsfiddle.net/VgAgu/3/ http://jsfiddle.net/VgAgu/3/

HTML

<div id="myRadioGroup">
    2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
    3 Cars<input type="radio" name="cars" value="3" />

    <div id="Cars2" class="desc">
        2 Cars Selected
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        3 Cars
    </div>
</div>

JQuery

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});