Показать/скрыть элемент по клику на чекбокс
Здравствуйте! Помогите, есть такая задача: Есть два вопроса, у каждого по три варианта ответа, нужно что бы при выборе какого-либо варианта ответа (клику по чекбоксу), показывался скрытый блок связанный с эти чекбоксом, если пользователь кликнет на другой вариант ответа, то предыдущий блок должен скрыться. Сейчас если кликнуть на второй чекбокс, то первый блок не скрывается и если убрать все чекбоксы, то почему то все скрытые блоки отображаются, хотя их не должно быть видно.
Есть вот такой код JSfiddle
$('input.ShowOrHide').click(function() {
var checked = $("input.ShowOrHide:checked");
if ( checked.length == 0 ) {
$("div.ShowOrHide").show();
} else {
$("div.ShowOrHide").hide();
checked.each(function() {
$( 'div#' + $(this).val() ).show();
});
}
});
Помогите, пожалуйста.
Суть в том, что вы зачем-то добавили checked для открытия нужного div. На открытие нужно ставить именно тот элемент на который нажали, а у вас стоит input checkbox и оно сначала убирает поля, а потом показывает DIV всех выбранных checkbox.
$('input.ShowOrHide').click(function() {
var checked = $("input.ShowOrHide:checked");
if (checked.length == 0) {
$("div.ShowOrHide").show();
} else {
$("div.ShowOrHide").hide();
$('div#' + $(this).val()).show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Вопрос один</p>
<input type="radio" class="ShowOrHide" value="myDivId1" name="one" />1 div
<input type="radio" class="ShowOrHide" value="myDivId2" name="one" />2 div
<input type="radio" class="ShowOrHide" value="myDivId3" name="one" />3 div
<p>Вопрос 2</p>
<input type="radio" class="ShowOrHide" value="myDivId4" name="two" />4 div
<input type="radio" class="ShowOrHide" value="myDivId5" name="two" />5 div
<input type="radio" class="ShowOrHide" value="myDivId6" name="two" />6 div
<hr />
<div id="myDivId1" class="ShowOrHide" style="display: none;">div #1 content</div>
<div id="myDivId2" class="ShowOrHide" style="display: none;">div #2 content</div>
<div id="myDivId3" class="ShowOrHide" style="display: none;">div #3 content</div>
<div id="myDivId4" class="ShowOrHide" style="display: none;">div #4 content</div>
<div id="myDivId5" class="ShowOrHide" style="display: none;">div #5 content</div>
<div id="myDivId6" class="ShowOrHide" style="display: none;">div #6 content</div>К сожалению ваш вариант реализации имеет много недостатков.
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23727 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
© "hostciti.net" 27.1.2025 | 18:53