Javascript load directly

Question

いくつかのラジオボタンといくつかのドロップダウンメニューがありますが、どのラジオボタンが選択されているかによって表示/非表示になりますが、私の最初の3つのラジオボタンはJSコードを直接有効にしません！

https://jsfiddle.net/spfrh9h8/

Imが言おうと何のビジュアルを取得するには、このバイオリンをチェックしてください。 「プライマリ」ラジオが選択されている間は、プルダウンしなくてもドロップダウンは表示されませんが、選択されてページがリロードされると（まだ選択されています）、ドロップダウンが再び表示されます't。私はこれが簡単な修正だと確信していますが、私はそれを理解できませんでした。

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

の開始の2つの非表示を追加します。この機能の中で、あなたが望むラジオボタンをトリガーすることができます。

例：ドキュメントの最初の無線が常に読み込まれます。

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

例：ユーザによって最後に選択されたラジオを（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'); 
    } 
    }); 
}); 

この最後のブロックが機能するためには、あなたのマークアップにIDsを逃しがあります。ここで

：ここ

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

：

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

そして、ここで：

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

このworking fiddleを参照してください。

Answer 2

だけであなたは、ドキュメントのロード時に起動されます機能を追加することができる機能

$(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})); 
 
       }); 
 
      }); 
 
     });