Показать/скрыть элемент по клику на чекбокс

646
23 января 2017, 20:32

Здравствуйте! Помогите, есть такая задача: Есть два вопроса, у каждого по три варианта ответа, нужно что бы при выборе какого-либо варианта ответа (клику по чекбоксу), показывался скрытый блок связанный с эти чекбоксом, если пользователь кликнет на другой вариант ответа, то предыдущий блок должен скрыться. Сейчас если кликнуть на второй чекбокс, то первый блок не скрывается и если убрать все чекбоксы, то почему то все скрытые блоки отображаются, хотя их не должно быть видно.

Есть вот такой код 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();
        });
    }
});

Помогите, пожалуйста.

Answer 1

Суть в том, что вы зачем-то добавили 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>

К сожалению ваш вариант реализации имеет много недостатков.

READ ALSO
Когда input заполнен
jQuery

Когда input заполнен

Добавить класс к label, когда его input заполнен

 364
jQuery не работает на странице jsp
jQuery

jQuery не работает на странице jsp

Доброй ночи! Пытаюсь разобраться как работает jQuery но не могу его нормально настроить на jsp страницеНа странице html код работает нормально

 336
Вставить данные json из файла в html
jQuery

Вставить данные json из файла в html

Здравствуйте! Помогите пожалуйста разобраться в вопросе: Беру json данные из внешнего файла и пытаюсь вставить в предназначенные для них элементыНо...

 592
Проблема с SlideToggle когда используем load
jQuery

Проблема с SlideToggle когда используем load

 300