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

I managed to get the radio buttons working for showing DIV-content and hiding it, when a different one is selected. However I am having an issue. I want to display the Google search by default. I tried adding "checked" to it, however it doesn't work (probably because it's not in there).

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

I created a JSFiddle for this here: https://jsfiddle.net/f2kk3a8c/

我在这里创建了一个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();
    });
});

As you can see the Google radio button is checked, however the corresponding DIV is not being shown by default. When you press the Google radio button it will show the DIV contents correctly (same with the other radio buttons).

如您所见，Google单选按钮已选中，但默认情况下不会显示相应的DIV。当您按下Google单选按钮时，它将正确显示DIV内容（与其他单选按钮相同）。

Is there an easy workaround for this? Can someone explain what the best method would be to achieve this? If you need more information, please ask. Thanks in advance.

有一个简单的解决方法吗？有人能解释一下实现这个目标的最佳方法吗？如果您需要更多信息，请询问。提前致谢。

Sidenote: I am using Bootstrap and was using the collapse function first, but I didn't like the effect (slow and didn't like how it loaded the DIV). So that's why I am using the current 'code'.

旁注：我正在使用Bootstrap，并且首先使用了折叠函数，但我不喜欢这种效果（慢，并且不喜欢它如何加载DIV）。这就是我使用当前“代码”的原因。

5 个解决方案

#1

You can use trigger() to click the first radio button, below is the updated code:

您可以使用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>

#2

You want to trigger a click() for your :checked radiobutton:

您想为您的：checked radiobutton触发click（）：

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

的jsfiddle

#3

For the first time you need to trigger the click event inside the $(document).ready(function() { ...}); for default checked element In radio button .

第一次需要在$（document）.ready（function（）{...}）中触发click事件;默认选中元素单选按钮。

use native click()

使用原生点击（）

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

Updated fiddle link fiddle

更新小提琴链接小提琴

#4

Your implementation hides the searchbar by default and only appears when you click a radio button. Upon loading, there are no clicking that happens, that's why it's not showing. You could add an click event upon loading the page.

您的实现默认隐藏搜索栏，仅在单击单选按钮时显示。加载后，没有发生任何点击，这就是它没有显示的原因。您可以在加载页面时添加单击事件。

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

#5

Replace your code with below one. It works as per your requirement. While document ready then checked first radio and trigger it's click event. So your click event will fire and execute it.

用下面的代码替换你的代码。它符合您的要求。准备好文档然后检查第一个无线电并触发它的点击事件。因此，您的点击事件将触发并执行它。

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