带有单选按钮的 jQuery 切换 div答案

【问题标题】：jQuery toggle div with radio buttons带有单选按钮的 jQuery 切换 div
【发布时间】：2011-01-12 21:01:14
【问题描述】：

简单的 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');
        });
    });
 });

但所需的切换效果不起作用。单击一个单选框无法隐藏另一个。

有什么想法吗？

【问题讨论】：

但您并没有在代码中隐藏另一个单选按钮，您只是显示其中一个 div？
你的代码适合我：jsfiddle.net/Reqyx（正如其他人所说，你不需要.each()。此外，你应该用var声明你的变量。）
这里不用.each()，可以写成("[name=toggler]").change(...)
我试过了，它按预期工作。

标签： jquery toggle

【解决方案1】：

<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');
    });
 });

如http://www.jsfiddle.net/eKFrW/

【讨论】：

很好的解决方案。如果它还显示在onload时检查的div，那就更好了
你可以使用这个@MrRebel：$("#blk-"+$("[name=toggler]:checked").val()).show();
为什么要使用.click函数？所以有一个效果，当再次单击所选项目时。使用.change，此函数仅在选择发生变化时执行。有什么想念的吗？
我同意@sschoof。使用 click 可能会导致意想不到的效果（例如 ajax 调用）。

【解决方案2】：

$("input:radio").click(function(){
    $("div").hide();
    var div = "#blk-"+$(this).val();
    $(div).show();
});

在线演示：http://jsfiddle.net/yLJPC/

【讨论】：

【解决方案3】：

我想这就是你想要的。首先，我会选择第一个单选按钮并使第一个 div 可见。然后切换按钮将交换 div

$("input:radio").click(function(){        
   $('#blk-1').toggle(); 
    $('#blk-2').toggle(); 
});

【讨论】：