jQuery切换带有单选按钮的div

Question

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

期望的切换效果并没有起作用。 点击一个单选框无法隐藏另一个单选框。

有什么想法吗？

- Dooie

---

但是你的代码中并没有隐藏其他单选按钮，而只是显示了其中一个div？ - German Rumm

你的代码对我有效：http://jsfiddle.net/Reqyx/ （正如其他人所指出的，你不需要使用.each()。此外，你应该用var声明你的变量。） - user113716

你不必使用.each()，可以将其写成("[name=toggler]").change(...)的形式。 - German Rumm

我尝试了一下，它按预期工作。 - Chandu

Answer 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/中的那样

- davin

---

很棒的解决方案。如果在onload时还显示被选中的div，那就更好了。 - Mr Rebel

你可以使用这个代码 @MrRebel： $("#blk-"+$("[name=toggler]:checked").val()).show(); - Thony

为什么使用.click函数？这样，当再次单击所选项目时，就会产生效果。使用 .change函数只有在选择发生更改时才执行。我错过了什么吗？ - sschoof

我同意@sschoof的观点。使用click可能会导致意外效果（例如ajax调用）。 - Chih-Ho Andy Chou

Answer 2

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

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

- amosrivera

Answer 3

这是您想要的内容。首先，我会将第一个单选按钮设为选中状态，并使第一个 div 可见。然后切换按钮将交换 div。

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

- stephen776