Javascript Show/Hide on radiobutton

Question

У меня есть 3 радиокнопки с надписью 'Squat', 'Benchpress' и 'Deadlift', которые показывают и скрывают связанное выпадающее меню (у меня есть 3 выпадающего списка, но только один из них показан каждый раз, содержащий разные данные)

Хотя сейчас я добавил еще 3 радиокута, называемых «Первичный», «Вторичный» и «Помощь». Теперь, если выбран первичный & радиокамеру помощи, я не хочу, чтобы любой выпадающий список был видимым вообще, только если выбран Secondary. И когда выбран Secondary, он должен быть только одним видимым, как сейчас! Я просто не могу заставить его работать.

Включая эту скрипку, чтобы вы могли визуализировать и посмотреть, что я имею в виду!

$(function() { 
    $("#datepicker").datepicker({ dateFormat: "yy-mm/dd" }).val() 
}); 

//Script for hiding dropdown menus and showing the one connected 
//to the right exercise based on which radiobutton is selected. 
$(function() { 
    $("input[type='radio']").change(function() { 
    if ($(this).val() == 1 && this.checked) { 
     $("#exerVariNameS").show(); 
     $("#exerVariNameB").hide(); 
     $("#exerVariNameD").hide(); 
    } else if ($(this).val() == 2 && this.checked){ 
     $("#exerVariNameS").hide(); 
     $("#exerVariNameB").show(); 
     $("#exerVariNameD").hide(); 
    } else if ($(this).val() == 3 && this.checked) { 
     $("#exerVariNameS").hide(); 
     $("#exerVariNameB").hide(); 
     $("#exerVariNameD").show(); 
    } 
    }); 
    //Remember which radiobutton was last clicked and keeps it that way 
    //after a page refresh or form post. 
    $('input[type=radio]').each(function() { 
    var state = JSON.parse(localStorage.getItem('radio_' + this.id)); 
    if (state) this.checked = state.checked; 
    $(this).trigger('change'); 
    });   
    $(window).bind('unload', function() { 
    $('input[type=radio]').each(function() { 
     localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked})); 
    }); 
    }); 
}); 

https://jsfiddle.net/o7m0d4uu/4/

Пожалуйста, спросите, если я объяснил плохо!

Answer 1

Все, что вам нужно, это вызвать обработчик события click на радиокнопках с помощью name="Type".

Вот решение:

$("input[name='Type']").click(function(){ 
     var value=$(this).val(); 
     switch(value){ 
      case '4': 
       $("input[name='Exercise']").each(function(){ 
       $(this).closest('div').hide(); 
       }); 
       $('#dropdown').hide(); 
       break; 
      case '5': 
       $("input[name='Exercise']").each(function(){ 
        $(this).closest('div').show(); 
       }); 
       $('#dropdown').show(); 
       break; 
      case '6': 
       $("input[name='Exercise']").each(function(){ 
       $(this).closest('div').hide(); 
       }); 
       $('#dropdown').hide(); 
       break; 
     } 
}); 

Здесь рабочий solution