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

我有一些单选button,我希望有不同的隐藏的div显示基于哪个单选button被选中。 这是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(); }); }); 

我这样做的原因是因为我的单选button和div是dynamic生成的(单选button的值总是有相应的div)。 上面的代码部分工作 – divs会显示何时检查正确的button,但我需要添加一些代码,使divs一旦button被取消选中隐藏。 谢谢!

6 Solutions collect form web for “如何使用jQuery显示/隐藏基于单选buttonselect的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(); }); }); 

应该pipe用

在展示之前先将它们隐藏起来:

 $(document).ready(function(){ $("input[name$='group2']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#"+test).show(); }); }); 
 $(document).ready(function(){ $("input[name=group1]").change(function() { var test = $(this).val(); $(".desc").hide(); $("#"+test).show(); }); }); 

在这个例子中是正确的input[name=group1] 。 但是,感谢代码!

一个有趣的解决scheme是使这个声明:你只是给每个div应该显示一个属性automaticallyVisibleIfIdChecked与它所依赖的checkbox或单选button的ID。 也就是说,你的表单看起来像这样:

 <form name="form1" id="my_form" method="post" action=""> <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> </form> .... <div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> <div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div> 

并有一些页面独立的JavaScript很好地使用函数式编程:

 function executeAutomaticVisibility(name) { $("[name="+name+"]:checked").each(function() { $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); }); $("[name="+name+"]:not(:checked)").each(function() { $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); }); } $(document).ready( function() { triggers = $("[automaticallyVisibleIfIdChecked]") .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) $.unique(triggers); triggers.each( function() { executeAutomaticVisibility(this.name); $(this).change( function(){ executeAutomaticVisibility(this.name); } ); }); }); 

类似的,你可以自动启用/禁用表单字段的automaticallyEnabledIfChecked EnableEnabledIfChecked属性。

我认为这个方法很好,因为它避免了为你的页面创build特定的JavaScript – 你只需要插入一些属性来说明应该做什么。

简单的jquery源码相同 –

 $("input:radio[name='group1']").click(function() { $('.desc').hide(); $('#' + $("input:radio[name='group1']:checked").val()).show(); }); 

为了使它更适合只是添加检查到第一个选项 –

 <div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div> 

从样式中删除.desc类和修改divs –

 <div id="opt1" class="desc">lorem ipsum dolor</div> <div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> <div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div> 

它会真的看起来不错。

 <script type="text/javascript"> $(function() { $("[name=toggler]").click(function(){ $('.toHide').hide(); $("#blk-"+$(this).val()).show('slow'); }); }); </script> </head> <body> <label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> <label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> <div id="blk-1" class="toHide" style="display:none"> <form action="success1.html"> Name1:<input type="text" name="name"> <input type="submit" name="submit"> </form> </div> <div id="blk-2" class="toHide" style="display:none"> <form action="success1.html"> Name2:<input type="text" name="name"> <input type="submit" name="submit"> </form> </div> 
  • 我如何从一个网页导出表excel
  • FullCalendar标题button丢失
  • 如何触发JavaScript中的窗口大小事件?
  • jQuery的textbox.val('xxxx')不会导致火灾的变化?
  • 更改占位符文本
  • 使用旧版浏览器的HTML5“data- *”属性有什么问题吗?
  • jQuery的Ajaxerror handling,显示自定义的exception消息
  • 使用.join方法将数组转换为无逗号的string
  • 以最大宽度在CSS中按比例缩放图像
  • jQuery.click()与onClick
  • 聆听DIV内的更改并采取相应措施