Изменение классов на нескольких divs при выборе определенных переключателей

Question

Привет всем, у меня проблема с javascript. Я не могу найти конкретное решение для Интернета. То, что я хочу сделать, - это выбрать один из переключателей и изменить класс # home-right на .rackmount или .shipping и добавить класс .displaynone к типу измерений, которые я не хочу показано на рисунке.

<div id="home-right" class="rackmount"> 
      <h4 class="helvneuebcn">Case Finder</h4> 

      <div class="cta-options"> 
       <input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/> 
       <input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/> 
      </div> 

      <div class="shipping-dimensions displaynone"> 
       <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div> 
       <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div> 
       <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div> 
      </div> 

      <div class="rackmount-dimensions"> 
       <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div> 
       <div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div> 
      </div> 

      <div class="clear"></div> 

      <input type="button" value="Submit" class="findcase"> 
</div> 

Answer 1

Используйте обработчик onClick на своих переключателях, чтобы сделать ваши вещи. Пример:

<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/> 

использовать также JQuery, если вы еще не - это сэкономит вам время и его очень легко сделать такую ​​функциональность.