Javascript direkt laden

Question

Ich habe ein paar Radiobuttons und ein paar Dropdown-Menüs, die zeigen/verbergen, je nachdem welche Radiobutton ausgewählt ist, aber meine ersten drei (von sechs) Radiobuttons aktiviert nicht den JS-Code direkt!

https://jsfiddle.net/spfrh9h8/

prüft diese Geige aus einem visuellen zu bekommen, was Im versucht zu sagen. Während das Radio "Primary" ausgewählt ist, sollte kein Dropdown-Menü sichtbar sein. Es wird nicht angezeigt, wenn es gedrückt wird. Wenn es ausgewählt ist und die Seite neu geladen wird, ist das Dropdown-Menü wieder sichtbar t. Ich bin mir ziemlich sicher, dass dies eine einfache Lösung ist, aber ich konnte es nicht herausfinden.

$(function() { 
     $("input[type='radio']").change(function() { 
      if ($(this).val() == 1 && this.checked) { 
       $("#exerVariNameS").show(); 
       $("#exerVariNameB").hide(); 
       $("#exerVariNameD").hide(); 
       $("#exerVariNameA").hide(); 
      } else if ($(this).val() == 2 && this.checked){ 
       $("#exerVariNameS").hide(); 
       $("#exerVariNameB").show(); 
       $("#exerVariNameD").hide(); 
       $("#exerVariNameA").hide(); 
      } else if ($(this).val() == 3 && this.checked) { 
       $("#exerVariNameS").hide(); 
       $("#exerVariNameB").hide(); 
       $("#exerVariNameD").show(); 
       $("#exerVariNameA").hide(); 
      } 
     }); 

     $("input[name='Type']").click(function(){ 
       var value=$(this).val(); 
      switch(value){ 
       case '4': 
       $("input[name='Exercise']").each(function(){ 
        $(this).closest('div').show(); 
       }); 
       $('#dropdown').hide(); 
       $('#exerVariNameA').hide(); 
       break; 
       case '5': 
       $("input[name='Exercise']").each(function(){ 
        $(this).closest('div').show(); 
       }); 
       $('#dropdown').show(); 
       $('#exerVariNameA').hide(); 
       break; 
       case '6': 
       $("input[name='Exercise']").each(function(){ 
        $(this).closest('div').hide(); 
       }); 
       $('#dropdown').hide(); 
       $('#exerVariNameA').show(); 
       break; 
      } 
     }); 
     //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'); 
     }); 
     $("input[name='Type']").each(function(){ 
      var state=JSON.parse(localStorage.getItem('radio_val'+this.value)); 
      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})); 
      }); 
      $("input[name='Type']").each(function(){ 
       localStorage.setItem('radio_val'+this.value,JSON.stringify({checked:this.checked})); 
      }); 
     }); 
    }); 

Answer 1

Sie können eine Funktion hinzufügen, die auf Dokumentlast ausgelöst wird. Innerhalb dieser Funktion können Sie den gewünschten Radio Button auslösen.

Beispiel: Immer das erste Funkgerät beim Laden des Dokuments auslösen.

$(document).ready(function() { 
    $('input[type=radio]:first-child').trigger('click'); 
}); 

Beispiel: Trigger letzte Radio vom Benutzer ausgewählt (nach localStorage).

$(document).ready(function() { 
    $('input[type=radio]').each(function() { 
    radio_val = JSON.parse(localStorage.getItem('radio_'+this.id)); 
    if (radio_val.checked) { 
     $(this).trigger('click'); 
    } 
    }); 
}); 

Für diesen letzten Block ist dort zu arbeiten IDs auf Ihrem Markup fehlt.

hier:

<input type="radio" name="Type" id="typ4" value="4" /> 

hier:

<input type="radio" name="Type" id="typ5" value="5" /> 

Und hier:

<input type="radio" name="Type" id="typ6" value="6" /> 

dieses working fiddle See.

Answer 2

fügen Sie einfach zwei Häute auf der Funktion Start

$(function() { 
 
$('#dropdown').hide(); 
 
        $('#exerVariNameA').hide(); 
 
      $("input[type='radio']").change(function() { 
 
       if ($(this).val() == 1 && this.checked) { 
 
        $("#exerVariNameS").show(); 
 
        $("#exerVariNameB").hide(); 
 
        $("#exerVariNameD").hide(); 
 
        $("#exerVariNameA").hide(); 
 
       } else if ($(this).val() == 2 && this.checked){ 
 
        $("#exerVariNameS").hide(); 
 
        $("#exerVariNameB").show(); 
 
        $("#exerVariNameD").hide(); 
 
        $("#exerVariNameA").hide(); 
 
       } else if ($(this).val() == 3 && this.checked) { 
 
        $("#exerVariNameS").hide(); 
 
        $("#exerVariNameB").hide(); 
 
        $("#exerVariNameD").show(); 
 
        $("#exerVariNameA").hide(); 
 
       } 
 
      }); 
 

 
      $("input[name='Type']").click(function(){ 
 
      \t \t var value=$(this).val(); 
 
       switch(value){ 
 
       \t case '4': 
 
        \t $("input[name='Exercise']").each(function(){ 
 
        \t $(this).closest('div').show(); 
 
        }); 
 
        $('#dropdown').hide(); 
 
        $('#exerVariNameA').hide(); 
 
        break; 
 
        case '5': 
 
        $("input[name='Exercise']").each(function(){ 
 
         $(this).closest('div').show(); 
 
        }); 
 
        $('#dropdown').show(); 
 
        $('#exerVariNameA').hide(); 
 
        break; 
 
        case '6': 
 
        $("input[name='Exercise']").each(function(){ 
 
         $(this).closest('div').hide(); 
 
        }); 
 
        $('#dropdown').hide(); 
 
        $('#exerVariNameA').show(); 
 
        break; 
 
       } 
 
      }); 
 
      //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'); 
 
      }); 
 
      $("input[name='Type']").each(function(){ 
 
      \t var state=JSON.parse(localStorage.getItem('radio_val'+this.value)); 
 
       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})); 
 
       }); 
 
       $("input[name='Type']").each(function(){ 
 
       \t localStorage.setItem('radio_val'+this.value,JSON.stringify({checked:this.checked})); 
 
       }); 
 
      }); 
 
     });