【ラジオボタンでJavascript表示・非表示切替】初期値で該当クラスが設定されている時は表示させたい

Question

やりたいこと

こちらの続きのようなかたちです。https://teratail.com/questions/325375
やりたいことは、JavaScriptでラジオボタンを使った要素の表示・非表示切替です。

回答のバリエーションがある場合を作ってみたく、input に class="show"があるときだけ
要素を表示したいです。

わからないこと・解決したいこと

試すうちに、changeイベントでは、ラジオボタンの初期値に
表示したい項目が設定されている場合は、クリックして選択を切り替えるまでは
表示させたい要素が表示されないことに気づきました。

ラジオボタンの初期値だった場合も、要素を表示したいです。

    <div class="container">
      <p>１．Webサイト</p>
      <ul class="radioBox">
        <li>
          <label><input class="show" type="radio" name="Webサイト" value="有">有</label>
        </li>
        <li>
          <label><input type="radio" name="Webサイト" value="無" checked>無</label>
        </li>
      </ul>
      <div id="sample01" class="content">URL：<input type="text" name="" size="30"></div>
    </div>
    <div class="container">
      <p>２．カフェスペース</p>
      <ul class="radioBox">
        <li>
        <label><input type="radio" class="show" name="カフェスペース" value="あり" checked>あり</label>
        </li>
        <li>
        <label><input type="radio" class="show" name="カフェスペース" value="なし">なし</label>
        </li>
        <li>
        <label><input type="radio" name="カフェスペース" value="未回答">未回答</label>
        </li>
      </ul>
      <div id="sample03" class="content">メモ：<input type="text" name="" size="30"></div>
    </div>
    <div class="container">
      <p>３．駐輪場</p>
      <ul class="radioBox">
        <li>
          <label><input type="radio" class="show" name="駐輪場" value="あり" onclick="checkradio04('block');">あり</label>
        </li>
        <li>
          <label><input type="radio" name="駐輪場" value="なし" onclick="checkradio04('none');">なし</label>
        </li>
        <li>
          <label><input type="radio" name="駐輪場" value="未回答" onclick="checkradio04('none');" checked>未回答</label>
        </li>
      </ul>
      <div id="sample04" class="content"><input type="text" name="" size="10">台</div>
    </div>

<script>
window.onload = function(){
var radios = document.querySelectorAll("input[type='radio']");
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener("change", radio_OnChange);
}
}
function radio_OnChange(event) {
let content = event.target.closest(".radioBox").nextElementSibling;
content.style.display = (event.target.classList.contains("show")) ? "block": "";
}
</script>

      .container {
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
      }
      .radioBox {
        display: inline-flex;
        margin-top: 0;
        padding: 15px;
        background: #e6e6fa;
      }
      .radioBox li {
        list-style: none;
      }
      .content {
        display: none;
      }

試したこと

ただonloadにしてみましたが動きませんでした。そして、window.onloadではなく下記のように変更して色々と試しましたが動かずです。

    window.addEventListener('load', function(){
      var radios01 = document.querySelectorAll("input[type='radio']");
      for (i = 0; i < radios.length; i++) {
        radios01[i].addEventListener("onload", radio_OnChange01);
      }
    })

    function radio_OnChange01(event) {
      let content01 = event.target.closest(".radioBox").nextElementSibling;
      content01.style.display = (event.target.classList.contains("show")) ? "block": "";
    }

    window.addEventListener('load', function(){
      var radios = document.querySelectorAll("input[type='radio']");
      for (i = 0; i < radios.length; i++) {
        radios[i].addEventListener("change", radio_OnChange);
      }
    })

    function radio_OnChange(event) {
      let content = event.target.closest(".radioBox").nextElementSibling;
      content.style.display = (event.target.classList.contains("show")) ? "block": "";
    }

教えていただけませんでしょうか。
よろしくお願いいたします。

Answer 1

onload のループ内に、ラジオボタンがchecked かつ showクラスを持っていたら、項目を表示するとという処理を追加すればいいでしょう。

window.onload = function(){
  var radios = document.querySelectorAll("input[type='radio']");
  for (i = 0; i < radios.length; i++) {
    radios[i].addEventListener("change", radio_OnChange);
    if (radios[i].checked && radios[i].classList.contains("show")) {
      radios[i].closest(".radioBox").nextElementSibling.style.display = "block";
    }    
  }
}
function radio_OnChange(event) {
  let content = event.target.closest(".radioBox").nextElementSibling;
  content.style.display = (event.target.classList.contains("show")) ? "block": "";
}

Comments

[pondering]

ご回答ありがとうございます。
やってみたかった通りの動作になりました。
onload のループ内でまとめて設定できるのですね。また、やりたいことがあっても
条件を言語化できておらず、どんな処理が希望通りの動作になるのか
自分でも理解しきれていなかったです。
頂いた回答をもとに色々なパターンを試しながら、勉強させていただきます。