Javascript Show / Hide on radiobutton

I have 3 radio buttons labeled "Squat", "Benchpress" and "Deadlift", each of which shows and hides the associated drop down menu (I have 3 drop-down lists, but only one is shown each time containing different data)

Although now I have added 3 more radio cuts, called "Primary", "Secondary" and "Help". Now, if the primary and secondary radio objects are selected, I do not want any drop-down list to be visible at all, only if Secondary is selected. And when Secondary is selected, it should be only one visible, as it is now! I just can't get it to work.

I turn on this fiddle so you can visualize and see what I mean!

$(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/

, , !

+4
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;
        }
});

+1

Source: https://habr.com/ru/post/1662325/


All Articles