Question

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).

I created a JSFiddle for this here: 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).

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'.

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

首次需要触发click内的$(document).ready(function() { ...});事件，以查看默认选中元素radio button。

使用原生click()

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

更新了小提琴链接fiddle

Answer 3

您想要为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 4

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

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

Answer 5

用下面的代码替换你的代码。它符合您的要求。然后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");
});

Checked radio button is not showing DIV content by default

5 个答案: