时间戳

首页 > 解决方案 > 在页面加载 Javascript 上选择默认单选输入

javascript - 在页面加载 Javascript 上选择默认单选输入

问题描述

我有一个页面，当我更改单选框时，它会显示不同的内容。

当我单击单选框时它起作用。但在编辑表单中，我希望选择第二个单选选项，并在页面加载时显示第二个单选选项的内容。如演示中所示，当我在收音机上填充“已选中”时，内容未显示。

演示。

var aTag = document.querySelector("a.mylink");
aTag.addEventListener("click", function(e) {
  e.preventDefault();
  var query = document.querySelector("input[data-for='" + e.currentTarget.id + "']").value;
  window.open(e.currentTarget.href + "?query=" + query, "_blank");
}, false);

// radio element click event handler
var radioClickHandler = function() {
  var first = document.querySelector('.first');
  var second = document.querySelector('.second');

  second.classList.add('hidden');
  // show/hide required elements depending on which radio element was clicked.
  if (this.value == 'product') {
    first.classList.remove('hidden');
    second.classList.add('hidden');
  }
  if (this.value == 'keyword') {
    first.classList.add('hidden');
    second.classList.remove('hidden');
  }
}

// Get All Radio Elements
var radios = document.querySelectorAll('[type=radio]');

// Apply click event
for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('click', radioClickHandler);
}
// Apply Default
radioClickHandler.apply(radios[0]);
.hidden {
  display: none;
}
<div class="col-md-8 offset-md-2">

  <div class="m-form__group form-group row">
    <div class="col-9">
      <div class="m-radio-inline mt-3 type_selector">
        <label class="m-radio">
              <input type="radio" name="type" value="product" data-id="specific_product"> First
              <span></span>
            </label>
        <label class="m-radio">
              <input type="radio" name="type" value="keyword" required="" data-id="search_term" checked> Second
              <span></span>
            </label>
      </div>
    </div>
  </div>
  <style>
    /*hides element*/
  </style>
  <div class="first">
    <label for="" class="mt-2 mb-2"><strong>First Content</strong></label>
    <select class="form-control m-select2 select2-hidden-accessible" id="m_select2_1" name="product_id" data-select2-id="m_select2_1" tabindex="-1" aria-hidden="true">
      <option value="" data-select2-id="" disabled selected>Blabla
      </option>
    </select>
  </div>
  <div class="second">
    <label for="exampleInputEmail1" class="pt-3"><strong>Second Content</strong></label>
    <div class="row mt-1 ">
      <div class="col-xl-8">
        <input type="text" class="form-control m-input m-input--solid" data-for="search_term" name="{{$default_template->notification_toggle_id}}_search_term" value="" id="m_autosize_1" placeholder="blabla">

      </div>
      <div class="col-xl-4 align-self-center">
        <a href="{{url('mesaj-sablonlari/urune-ozel/arama')}}" class="mylink " id="search_term">First Content</a>
        <script>
        </script>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  </script>
</div>

我尝试了几件事。但我没能成功。

window.onload = radioClickHandler;

后

window.onload = function() {
  The whole javascript snippet
};

还有这个

var radios = document.querySelectorAll('.type_selector .m-radio input[type=radio]');

标签： javascriptjqueryhtml

解决方案

工作小提琴。

您可以简单地使用以下方法调用 click 事件：

radios[1].click();

编辑：

出现问题是因为您将单击事件附加到以下行中当前文档中的所有单选按钮：

var radios = document.querySelectorAll('[type=radio]');

要解决此问题，您需要封装first & second无线电，以便您可以单独将点击附加到它们：

<div id="first-second" class="m-form__group form-group row">

然后将事件附加到他们身上，例如：

var radios = document.querySelectorAll('#first-second [type=radio]');

推荐阅读