Javascript直接加载

Question

我有几个单选按钮和几个下拉菜单显示/隐藏取决于选择哪个单选按钮，但是我的前三个（六个）单选按钮不会直接激活JS代码！

https://jsfiddle.net/spfrh9h8/

检查这个小提琴，以了解我想说的内容。 而小学＆＃39;无线电被选中，没有下拉应该是可见的，因为如果你按下它不会，但是，当它被选中并重新加载页面时，（仍然选择）下拉列表将在那里不再可见。我很确定这很容易解决，但我无法弄明白。

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

您可以添加在文档加载时触发的函数。在此功能中，您可以触发所需的单选按钮。

Ex：始终触发文档加载时的第一个无线电。

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

Ex：触发用户选择的最后一个收音机（根据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

只需在启动功能时添加两张皮片

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;