如何使用jQuery显示/隐藏divs基于单选按钮选择?

我有一些单选按钮,我想有不同的隐藏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();
    }); 
});

应该工作

http://stackoverflow.com/questions/2777139/how-to-use-jquery-to-show-hide-divs-based-on-radio-button-selection

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:如何使用jQuery显示/隐藏divs基于单选按钮选择?