2011-01-12 5 views
13

Простого HTML & JQueryJQuery переключения ДИВ с радиокнопками

<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

но вы не скрываете другую радиокнопку в своем коде, вы просто показываете один из divs? –

+0

Вам не нужны все –

+1

Ваш код работает для меня: http://jsfiddle.net/Reqyx/ (Как отмечалось другими, вам не нужен '.each()'. Кроме того, вы должны объявить свою переменная с 'var'.) – user113716

ответ

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/

+0

Отличное решение. Это было бы еще больше, если бы он также показывал div, проверенный onload –

+1

Вы можете использовать этот @MrRebel: '$ (" # blk - "+ $ (" [name = toggler]: checked "). Val()) .show(); ' – Thony

+1

Зачем использовать функцию .click? Таким образом, есть эффект, когда снова щелкните выбранный элемент. Используя [.change] (https://api.jquery.com/change/), эта функция выполняется только при изменении выбора. Мисс, я что-то? – sschoof

1

Вот что вы хотите, я думаю. Для начала я бы выбрал первую радиокнопку, и первый div был видимым. Затем кнопки переключения будут заменять divs

$("input:radio").click(function(){   
    $('#blk-1').toggle(); 
    $('#blk-2').toggle(); 
}); 
Смежные вопросы