如何使用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被取消选中隐藏。 谢谢！
更新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>
