選擇頁面加載Javascript上的默認單選輸入

Question

我有一個頁面，當我更改單選框時會顯示不同的內容。

單擊單選框時，它可以工作。 但是我希望在編輯表單中選擇第二個單選選項，並在頁面加載時顯示第二個單選選項的內容。 如演示中所示，當我在廣播中填充“選中”時，內容不會顯示。

演示

 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

工作提琴 。

您可以使用以下命令簡單地調用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事件。 因此，您確實需要在window.onload或init函數中對其進行更改后觸發該onchange或onclick 。

要觸發事件，請使用如何在JavaScript中觸發事件？