默认情况下，选中的单选按钮没有显示DIV内容

Question

我设法让单选按钮可以显示DIV内容并隐藏它，当选择不同的内容时。但是我有一个问题。我想默认显示Google搜索。我尝试添加“检查”它，但它不起作用（可能是因为它不在那里）。

我创建了一个的jsfiddle这个位置：https://jsfiddle.net/f2kk3a8c/

$(document).ready(function(){ 
    $('input[type="radio"]').click(function(){ 
     var inputValue = $(this).attr("value"); 
     var targetBox = $("." + inputValue); 
     $(".box").not(targetBox).hide(); 
     $(targetBox).show(); 
    }); 
}); 

正如你可以看到谷歌单选按钮被选中，但是相应的DIV没有被默认显示。当您按下Google单选按钮时，它将正确显示DIV内容（与其他单选按钮相同）。

有没有简单的解决方法呢？有人可以解释什么是实现这一目标的最佳方法吗？如果您需要更多信息，请询问。提前致谢。我使用Bootstrap并首先使用了折叠函数，但我不喜欢这种效果（速度慢，不喜欢它如何加载DIV）。所以这就是我使用当前“代码”的原因。

Answer 1

您可以使用trigger()单击第一个单选按钮，下面是更新后的代码：

$('input[type="radio"]').on('click', function() { 
 
    var inputValue = $(this).attr("value"); 
 
    var targetBox = $("." + inputValue); 
 
    $(".box").not(targetBox).hide(); 
 
    $(targetBox).show(); 
 
}); 
 

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

.box { 
 
    display: none; 
 
} 
 

 
.control { 
 
    display: inline; 
 
    position: relative; 
 
    padding-left: 15px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
} 
 

 
.control input { 
 
    position: absolute; 
 
    z-index: -1; 
 
    opacity: 0; 
 
} 
 

 
.control__indicator { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 0; 
 
    height: 14px; 
 
    width: 14px; 
 
    background: #e6e6e6; 
 
} 
 

 
.control--radio .control__indicator { 
 
    border-radius: 50% !important; 
 
} 
 

 
.control:hover input~.control__indicator, 
 
.control input:focus~.control__indicator { 
 
    background: #ccc; 
 
} 
 

 
.control input:checked~.control__indicator { 
 
    background: #2aa1c0; 
 
} 
 

 
.control:hover input:not([disabled]):checked~.control__indicator, 
 
.control input:checked:focus~.control__indicator { 
 
    background: #0e647d; 
 
} 
 

 
.control input:disabled~.control__indicator { 
 
    background: #e6e6e6; 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
} 
 

 
.control__indicator:after { 
 
    content: ''; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.control input:checked~.control__indicator:after { 
 
    display: block; 
 
} 
 

 
.control--radio .control__indicator:after { 
 
    left: 4px; 
 
    top: 4px; 
 
    height: 6px; 
 
    width: 6px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
} 
 

 
.control--radio input:disabled~.control__indicator:after { 
 
    background: #7b7b7b; 
 
} 
 

 
.select { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 

 
.select select { 
 
    display: inline-block; 
 
    width: 100%; 
 
    cursor: pointer; 
 
    padding: 10px 15px; 
 
    outline: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
    background: #e6e6e6; 
 
    color: #7b7b7b; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
.select select::-ms-expand { 
 
    display: none; 
 
} 
 

 
.select select:hover, 
 
.select select:focus { 
 
    color: #000; 
 
    background: #ccc; 
 
} 
 

 
.select select:disabled { 
 
    opacity: 0.5; 
 
    pointer-events: none; 
 
} 
 

 
.select__arrow { 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 15px; 
 
    width: 0; 
 
    height: 0; 
 
    pointer-events: none; 
 
    border-style: solid; 
 
    border-width: 8px 5px 0 5px; 
 
    border-color: #7b7b7b transparent transparent transparent; 
 
} 
 

 
.select select:hover~.select__arrow, 
 
.select select:focus~.select__arrow { 
 
    border-top-color: #000; 
 
} 
 

 
.select select:disabled~.select__arrow { 
 
    border-top-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-7"> 
 

 
    <div> 
 
     <label class="control control--radio"> Google 
 
      <input type="radio" name="colorRadio" value="google" checked="checked" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 

 
     <label class="control control--radio"> Ondertitels 
 
      <input type="radio" name="colorRadio" value="subtitleseeker" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 

 
     <label class="control control--radio"> NZBgrabit 
 
      <input type="radio" name="colorRadio" value="nzbgrabit" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 

 
     <label class="control control--radio"> NZBindex 
 
      <input type="radio" name="colorRadio" value="nzbindex" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 

 
     <label class="control control--radio"> PostNL 
 
      <input type="radio" name="colorRadio" value="postnl" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 

 
     <label class="control control--radio"> MaxMind 
 
      <input type="radio" name="colorRadio" value="maxmind" /> 
 
      <div class="control__indicator"></div> 
 
     </label> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="col-md-5"> 
 

 
    <div class="google box"> 
 
     <div class="google"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="Google"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    <div class="subtitleseeker box"> 
 
     <div class="subtitleseeker"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="Subtitleseeker"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    <div class="nzbgrabit box"> 
 
     <div class="nzbgrabit"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="NZBgrabit"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    <div class="nzbindex box"> 
 
     <div class="nzbindex"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="NZBindex"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    <div class="postnl box"> 
 
     <div class="postnl"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="PostNL"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    <div class="maxmind box"> 
 
     <div class="maxmind"> 
 
     <form action="/action_page.php"> 
 
      <input type="text" name="firstname" value="MaxMind"> 
 
      <input type="submit" value="Zoeken"> 
 
     </form> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

第一次，你需要触发$(document).ready(function() { ...});默认内click事件选中元素在radio button。

使用本地click()

$(document).ready(function() { 
    $('input[name="colorRadio"]:checked').click(); 
}); 

更新拨弄链接fiddle

Answer 3

下面一个替换您的代码。它按照您的要求工作。而document ready然后检查第一个广播和trigger这是点击事件。所以你的click event会触发并执行它。

$('input[type="radio"]').click(function(){ 
    var inputValue = $(this).attr("value"); 
    var targetBox = $("." + inputValue); 
    $(".box").not(targetBox).hide(); 
    $(targetBox).show(); 
}); 

$(document).ready(function(){ 
    $("input:radio:first").prop("checked", true).trigger("click"); 
}); 

Answer 4

要触发一个click()您:checked单选：

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { 
    var inputValue = $(this).attr("value"); 
    var targetBox = $("." + inputValue); 
    $(".box").not(targetBox).hide(); 
    $(targetBox).show(); 
    }); 
    $('input[type="radio"]:checked').click(); 
}); 

JsFiddle

Answer 5

您的实现隐藏在默认情况下搜索栏，当你点击一个单选按钮才会出现。加载后，没有发生点击，这就是为什么它没有显示。您可以在加载页面时添加点击事件。

$(document).ready(function(){ 
    $('input[type="radio"]').click(function(){ 
     var inputValue = $(this).attr("value"); 
     var targetBox = $("." + inputValue); 
     $(".box").not(targetBox).hide(); 
     $(targetBox).show(); 
    }); 
    $('input[type="radio"]:first').click(); 
});