2011-01-12 111 views
13

簡單的HTML & jQuery的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

但您沒有隱藏代碼中的其他單選按鈕,您只是顯示其中一個div? – 2011-01-12 21:08:25

+0

你並不需要每一個 – 2011-01-12 21:09:06

回答

27
<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/

1

繼承人你想要什麼,我認爲。要開始,我會選擇第一個單選按鈕並顯示第一個div。然後切換按鈕將交換divs

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