相关疑难解决方法(0)

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

我有一些单选按钮,我想根据选择的单选按钮显示不同的隐藏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>
Run Code Online (Sandbox Code Playgroud)

这是我的jQuery:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("#"+test).show();
    }); 
});
Run Code Online (Sandbox Code Playgroud)

我这样做的原因是因为我的单选按钮和div是动态生成的(单选按钮的值总是有一个相应的div).上面的代码部分工作 - div会在选中正确的按钮时显示,但我需要添加一些代码,以便在取消选中按钮后再次隐藏div.谢谢!

jquery radio-button mouseclick-event

35
推荐指数
5
解决办法
12万
查看次数

标签 统计

jquery ×1

mouseclick-event ×1

radio-button ×1