Скрыть/Показать DIV по выбору RADIO

261

18 мая 2018, 06:30

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

Вот такая простенькая задача на JS, но совсем не силен в нем, облазил уже кучу статей и натыкался только на одинокий DIV, а тут их множество.

Все к чему пришел это пример ниже, но тут есть 2 проблемы, если нажать на radio блок появляется, при переключении открывает еще один блок, а этот не исчезает и также если таких radio будет штук 15-20, то JS получится слишком большой.

Надеюсь на вашу помощь, за ранее спасибо!

function Selected(a) { 
  var label = a.value; 
    if(label=="kurtki"){ 
       document.getElementById("kurtki").style.display='block'; 
    }  
    else if(label=="svitshot"){ 
       document.getElementById("svitshot").style.display='block'; 
    } 
    else if(label=="futbolki"){ 
       document.getElementById("futbolki").style.display='block'; 
    } 
    else if(label=="shtani"){ 
       document.getElementById("shtani").style.display='block'; 
    } 
    else if(label=="short"){ 
       document.getElementById("short").style.display='block'; 
    } 
}

.deactive{ 
  display:none; 
}

<input name="select2" value="kurtki" type="radio" onChange="Selected(this)">Куртки 
<input name="select2" value="svitshot" type="radio" onChange="Selected(this)">Свитера 
<input name="select2" value="futbolki" type="radio" onChange="Selected(this)">Футболки 
<input name="select2" value="shtani" type="radio" onChange="Selected(this)">Штаны 
<input name="select2" value="short" type="radio" onChange="Selected(this)">Шорты 
 
 
<div id='kurtki' class="deactive">блок с куртками</div> 
<div id='svitshot' class="deactive">блок с свитерами</div> 
<div id='futbolki' class="deactive">блок с футболками</div> 
<div id='shtani' class="deactive">блок со штанами</div> 
<div id='short' class="deactive">блок с шортами</div>

Answer 1

Для блоков нужно добавить общий класс и можно сделать более универсально :

document.querySelectorAll('[name=select2]').forEach(s => { 
  s.addEventListener('change', function() { 
    document.querySelectorAll('.someClass').forEach(d => d.classList.add('deactive')); 
    document.getElementById(this.value).classList.remove('deactive'); 
  }); 
});

.deactive { 
  display: none; 
}

<input name="select2" value="kurtki" type="radio">Куртки 
<input name="select2" value="svitshot" type="radio">Свитера 
<input name="select2" value="futbolki" type="radio">Футболки 
<input name="select2" value="shtani" type="radio">Штаны 
<input name="select2" value="short" type="radio">Шорты 
 
<div id='kurtki' class="someClass deactive">блок с куртками</div> 
<div id='svitshot' class="someClass deactive">блок с свитерами</div> 
<div id='futbolki' class="someClass deactive">блок с футболками</div> 
<div id='shtani' class="someClass deactive">блок со штанами</div> 
<div id='short' class="someClass deactive">блок с шортами</div>

Answer 2

Самый простой вариант, создать функцию, в которой будут скрываться все блоки и вызывать в начале функции Selected, так все блоки будут скрыты всегда перед тем, как будет показан новый. Можно также тело из функции hideAllBlock перенести в функцию Selected.

function hideAllBlock() { 
  document.getElementById("short").style.display = 'none'; 
  document.getElementById("shtani").style.display = 'none'; 
  document.getElementById("futbolki").style.display = 'none'; 
  document.getElementById("svitshot").style.display = 'none'; 
  document.getElementById("kurtki").style.display = 'none'; 
} 
 
function Selected(a) { 
  hideAllBlock(); 
  document.getElementById(a.value).style.display = 'block'; 
}

.deactive { 
  display: none; 
}

<input name="select2" value="kurtki" type="radio" onChange="Selected(this)">Куртки 
<input name="select2" value="svitshot" type="radio" onChange="Selected(this)">Свитера 
<input name="select2" value="futbolki" type="radio" onChange="Selected(this)">Футболки 
<input name="select2" value="shtani" type="radio" onChange="Selected(this)">Штаны 
<input name="select2" value="short" type="radio" onChange="Selected(this)">Шорты 
 
 
<div id='kurtki' class="deactive">блок с куртками</div> 
<div id='svitshot' class="deactive">блок с свитерами</div> 
<div id='futbolki' class="deactive">блок с футболками</div> 
<div id='shtani' class="deactive">блок со штанами</div> 
<div id='short' class="deactive">блок с шортами</div>