我有一些单选按钮，我想有不同的隐藏div显示基于哪个单选按钮被选中。下面是HTML的样子：
<form name="form1" id="my_form" method="post" action="">
<div><label><input type="radio" name="group1" value="opt1">opt1</label></div>
<div><label><input type="radio" name="group1" value="opt2">opt2</label></div>
<div><label><input type="radio" name="group1" value="opt3">opt3</label></div>
<input type="submit" value="Submit">
</form>
....
<style type="text/css">
.desc { display: none; }
</style>
....
<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
<div id="opt3" class="desc">sed do eiusmod tempor</div>
这里是我的jQuery：
$(document).ready(function(){
$("input[name$='group2']").click(function() {
var test = $(this).val();
$("#"+test).show();
});
});
我这样做的原因是因为我的单选按钮和div是动态生成(单选按钮的值将始终有一个相应的div)。上面的代码部分工作 – 当正确的按钮被选中时，div会显示，但是我需要添加一些代码，以便在按钮被取消选中时，div会再次隐藏。谢谢！
解决方法
更新2015/06
自从问题发布以来，jQuery已经发展，现在推荐的方法是使用$ .on
$(document).ready(function() {
$("input[name=group2]").on( "change",function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
} );
});
或外面$ .ready()
$(document).on( "change","input[name=group2]",function() { ... } );
原答案
您应该使用.change()事件处理程序：
$(document).ready(function(){
$("input[name=group2]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
应该工作
