Как использовать jQuery для отображения/скрытия divs на основе выбора переключателя?
У меня есть радиокнопки, и я хочу, чтобы на экране отображались разные скрытые div, на основе которых выбран переключатель. Вот как выглядит HTML:
<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();
});
});
Причина, по которой я делаю это, заключается в том, что мои переключатели и divs генерируются динамически (значение переключателя всегда будет иметь соответствующий div). Приведенный выше код работает частично - divs покажет, когда будет проверена правильная кнопка, но мне нужно добавить код, чтобы divs снова спрятались после того, как кнопка не отмечена. Спасибо!
Ответы
Ответ 1
Обновление 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();
});
});
должен работать
Ответ 2
Просто скройте их, прежде чем показывать их:
$(document).ready(function(){
$("input[name$='group2']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
Ответ 3
$(document).ready(function(){
$("input[name=group1]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
Правильно input[name=group1] в этом примере. Однако, спасибо за код!
Ответ 4
<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>
Ответ 5
Интересным решением является создание этого объявления: вы просто указываете каждому div, которому должен быть показан атрибут automaticallyVisibleIfIdChecked с идентификатором флажка или переключателем, от которого он зависит. То есть ваша форма выглядит следующим образом:
<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 для вашей страницы - вы просто вставляете некоторые атрибуты, которые говорят, что нужно делать.
Ответ 6
Простой источник 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 из стиля и изменить divs как -
<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>
он действительно будет хорошо выглядеть в любом случае.
Ответ 7
Ниже код отлично работает для меня:
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label><input type="radio" name="colorRadio" value="red"> red</label>
<label><input type="radio" name="colorRadio" value="green"> green</label>
<label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
