M T*_*mas 35 jquery radio-button mouseclick-event
我有一些单选按钮,我想根据选择的单选按钮显示不同的隐藏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.谢谢!
Z. *_*tev 45
更新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();
});
});
应该管用
alb*_*ein 39
在显示之前隐藏它们:
$(document).ready(function(){
$("input[name$='group2']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
小智 7
$(document).ready(function(){
$("input[name=group1]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
input[name=group1]在这个例子中它是正确的.不过,谢谢你的代码!
<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>
一个有趣的解决方案是使这个声明:你只需给每个应该显示一个属性的div,它automaticallyVisibleIfIdChecked的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.
我认为这种方法很好,因为它避免了为您的页面创建特定的JavaScript - 您只需插入一些属性来说明应该做什么.
| 归档时间： |
|
| 查看次数： |
122515 次 |
| 最近记录： |