简单的html& jQuery的
<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label>
<div id="blk-1" style="display:none">
...
</div>
<div id="blk-2" style="display:none">
...
</div>
$(function() {
$("[name=toggler]").each(function(i) {
$(this).change(function(){
$('#blk-1, #blk-2').hide();
divId = 'blk-' + $(this).val();
$("#"+divId).show('slow');
});
});
});
但是,所需的切换效果不起作用。单击一个单选框无法隐藏另一个单选框。
任何想法?
答案 0 :(得分:29)
<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label>
<div id="blk-1" class="toHide" style="display:none">
money
</div>
<div id="blk-2" class="toHide" style="display:none">
interest
</div>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
答案 1 :(得分:2)
$("input:radio").click(function(){
$("div").hide();
var div = "#blk-"+$(this).val();
$(div).show();
});
答案 2 :(得分:1)
你想要的是我想的。首先,我将选择第一个单选按钮,并显示第一个div。然后切换按钮将交换div
$("input:radio").click(function(){
$('#blk-1').toggle();
$('#blk-2').toggle();
});