选中的单选按钮默认不显示 DIV 内容

Question

我设法让单选按钮工作以显示 DIV-内容并在选择不同内容时将其隐藏。但是我有一个问题。我想默认显示 Google 搜索。我尝试向其中添加 "checked"，但是它不起作用（可能是因为它不在那里）。

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

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

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

旁注：我正在使用 Bootstrap 并首先使用折叠功能，但我不喜欢这种效果（速度慢而且不喜欢它加载 DIV 的方式）。所以这就是我使用当前 'code'.

的原因

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() { ...}); 中触发 radio button 中默认选中元素的 click 事件。

使用原生 click()

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

已更新 fiddle link 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

您想为 :checked 单选按钮触发 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

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

选中的单选按钮默认不显示 DIV 内容

Checked radio button is not showing DIV content by default

html

jquery

show-hide

radio-button