Как использовать jQuery для отображения/скрытия divs на основе выбора переключателя?

У меня есть радиокнопки, и я хотел бы, чтобы на экране отображались разные скрытые div, на основе которых была выбрана радиокнопка. Вот то, что HTML выглядит следующим образом:Как использовать jQuery для отображения/скрытия divs на основе выбора переключателя?

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div> 
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div> 
    <input type="submit" value="Submit"> 
</form> 

.... 

<style type="text/css"> 
    .desc { display: none; } 
</style> 

.... 

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc">consectetur adipisicing</div> 
<div id="opt3" class="desc">sed do eiusmod tempor</div>

А вот мой JQuery:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("#"+test).show(); 
    }); 
});

Причина Я делаю это таким образом, потому что мои радио-кнопки и дивы генерируются динамически (значение переключатель всегда будет иметь соответствующий div). Приведенный выше код работает частично - divs покажет, когда будет проверена правильная кнопка, но мне нужно добавить код, чтобы divs снова спрятались после того, как кнопка не отмечена. Благодаря!

источник

2010-05-05 M Thomas

Хороший вопрос .... –

Как упомянуто @ Ste-Yeu, пожалуйста, исправьте селектор «group1» в вашем JQuery :) –

Update 2015/06

Как JQuery развивалась, так как вопрос был опубликован, рекомендуемый подход в настоящее время используется $.on

$(document).ready(function() { 
    $("input[name=group2]").on("change", function() { 

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

или вне $.ready()

$(document).on("change", "input[name=group2]", function() { ... });

Оригинал ответ

Вы должны использовать .change() обработчик события:

$(document).ready(function(){ 
    $("input[name=group2]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

должен работать

источник

2010-05-05 22:13:45 Zlatev

Просто скрыть их, прежде чем показывать их:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#"+test).show(); 
    }); 
});

источник

2010-05-05 22:14:20 albertein

спасибо, что это именно то, что мне нужно было –

Thanx Человек это один помог мне .... –

Простой источник JQuery для того же -

$("input:radio[name='group1']").click(function() {  
    $('.desc').hide(); 
    $('#' + $("input:radio[name='group1']:checked").val()).show(); 
});

Для того, чтобы сделать его немного более целесообразно просто добавить проверил первый вариант -

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

класса удалить .Desc от стиля и изменять дивы как -

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> 
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

это будет действительно хорошо выглядеть any- пути.

источник

2012-07-06 06:37:05 Bharat

это помогло мне, спасибо –

$(document).ready(function(){ 
    $("input[name=group1]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

В этом примере input[name=group1]. Однако, спасибо за код!

источник

2012-12-14 15:31:34

<script type="text/javascript"> 
$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 

<div id="blk-1" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name1:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 

</div> 
<div id="blk-2" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name2:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 
</div>

источник

2013-07-10 11:21:18

Интересным решением является сделать это декларативный: вы просто дать каждому DIV, который должен быть показан атрибут automaticallyVisibleIfIdChecked с идентификатором кнопки CheckBox или радио, на которой она зависит.То есть, ваша форма выглядит следующим образом:

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> 
</form> 
.... 
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> 
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

и иметь некоторую страницу независимый JavaScript, который хорошо использует функциональное программирование:

function executeAutomaticVisibility(name) { 
    $("[name="+name+"]:checked").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); 
    }); 
    $("[name="+name+"]:not(:checked)").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); 
    }); 
} 

$(document).ready(function() { 
    triggers = $("[automaticallyVisibleIfIdChecked]") 
     .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) 
    $.unique(triggers); 
    triggers.each(function() { 
     executeAutomaticVisibility(this.name); 
     $(this).change(function(){ executeAutomaticVisibility(this.name); }); 
    }); 
});

, подобным образом можно автоматически включить/отключить поля формы с атрибутом automaticallyEnabledIfChecked.

Я думаю, что этот метод хорош, так как он позволяет избежать необходимости создания определенного JavaScript для вашей страницы - вы просто вставляете некоторые атрибуты, которые говорят, что нужно делать.

источник

2014-08-07 18:40:07

Как использовать jQuery для отображения/скрытия divs на основе выбора переключателя?

ответ

Смежные вопросы