Question

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

当我单击单选框时它起作用。但是我希望在编辑表单中选择第二个单选选项，并在页面加载时显示第二个单选选项的内容。如演示中所示，当我在广播中填充“选中”时，内容不会显示。

Demo 。

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]');

Answer 1

Working fiddle 。

您只需使用以下命令即可调用click事件：

radios[1].click();

编辑：

发生问题是因为您将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]');

Answer 2

编辑：我认为这是将其他单选按钮添加到同一组中，因此第二个不是您的第二个单选按钮，而是第5个，因此现在可以使用

radioClickHandler.apply(radios[5]);

http://jsfiddle.net/wy9xbhdo/

Answer 3

以编程方式更改选择对象的选定选项或以编程方式填充输入值时，不会触发onchange或onclick事件。因此，您确实需要在onchange或onclick函数中对其进行更改后触发window.onload或init。

要触发事件，请使用How to trigger event in JavaScript?

选择页面加载Javascript上的默认单选输入

3 个答案: