javascript <input type=radio>にcheckがあるか無いかで、別要素を表示、非表示で切り替えたい

Question

javascriptでinput要素にcheckがあるか無いかで別要素を表示、非表示の切り替えを行いたいです。

<div class="radio-box-wrap">
     <div class="radio-box">
        <input type="radio" name="boundSelect" value="out" checked="checked" id="outbound">
        <label for="outbound" class="radio-box__label">下り（京都～大阪）</label>
      </div>
      <div class="radio-box">
         <input type="radio" name="boundSelect" value="in" id="inbound">
         <label for="inbound" class="radio-box__label">上り（大阪～京都）</label>
     </div>
</div>

<!--div class="radio-box"のinput にcheckがあるか無いかで表示を切り変えたい要素。-->
            <div id="box_out" class="box_out_a" style="display:none">
              <select >
                <option value="out_1">2023年1月13日</option>
                <option value="out_2">2023年1月24日</option>
                <option value="out_3">2023年2月3日</option>
              </select>
            </div>
            <div id="box_in" class="box_in_a"  style="display:none">
              <select>
                <option value="in_1">2023年1月15日</option>
                <option value="in_2">2023年1月26日</option>
                <option value="in_3">2023年325日</option>
              </select>
            </div>

if(getElementById('#outbound').checked == true){
    let elem = document.getElementById("#box_out");
    elem.style.display = "block";
}else {
   let elem = document.getElementById("#box_in");
   elem.style.display = "block";
}

しかし、上記コードでは#outboundにチェックがある無しに関わらず、<div id="box_out">も<div id="box_in"＞も表示されてしまいます。

エラーも出ていません。。。

どうすれば、<input>タグのチェックの有無で <div id="box_out"> と<div id="box_in">の表示が切り替えれるでしょうか?

Comments

[退会済みユーザー]

一方を elem.style.display = "block" としたら他方は elem.style.display = "none" とするのでは？

[退会済みユーザー]

あと、ラジオボタンの change イベントのリスナで表示非表示を制御しないと望む動きにならないはずですが、質問のコードにはそれが見当たりません。どうなっているのですか？

[Fukusuke0604]

コメントありがとうございます。
そもそもが色々間違えているようですね。。。

[退会済みユーザー]

回答に書きましたのでそちらを見てください。

[退会済みユーザー]

質問者さん、回答したのでフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。

[Fukusuke0604]

返信がおそくなり大変申し訳ありませんでした。

自分が思っていた以上に処理を書いてあげなければいけなかったですね。。。
もっと勉強します。

Answer 1

こんな感じで

<script>
document.addEventListener('change', (e)=>{
  const v=document.querySelector('[name="boundSelect"]:checked')?.value;
  box_out.style.display=v=="out"?"block":"none";
  box_in.style.display =v=="in"?"block":"none";
});
window.addEventListener('DOMContentLoaded', ()=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('change', true, true );
  document.dispatchEvent(ce);
});
</script>
<div class="radio-box-wrap">
     <div class="radio-box">
        <input type="radio" name="boundSelect" value="out" id="outbound">
        <label for="outbound" class="radio-box__label">下り（京都～大阪）</label>
      </div>
      <div class="radio-box">
         <input type="radio" name="boundSelect" value="in" id="inbound">
         <label for="inbound" class="radio-box__label">上り（大阪～京都）</label>
     </div>
</div>

            <div id="box_out" class="box_out_a" style="display:none">
              out<select >
                <option value="out_1">2023年1月13日</option>
                <option value="out_2">2023年1月24日</option>
                <option value="out_3">2023年2月3日</option>
              </select>
            </div>
            <div id="box_in" class="box_in_a"  style="display:none">
              in<select>
                <option value="in_1">2023年1月15日</option>
                <option value="in_2">2023年1月26日</option>
                <option value="in_3">2023年325日</option>
              </select>
            </div>

本来ならスタイルシートでクラスなどを付け外しして表示を切り替えるほうが楽です

Answer 2

エラーの原因

エラーも出ていません。。。

エラーは出ているはずです。
なぜなら全くもって間違った書き方をしているからです。
実際に質問者様のコードをコピペして実行するとUncaught ReferenceError: getElementById is not definedというエラーができました。
エラーが出ていないというのはどのようにしてそう思われたのでしょうか？

まずこちらのエラーの原因ですが質問者様のコードの1行目ですね。

if(getElementById('#outbound').checked == true) {

getElementById()はただの関数ではなく要素に紐づいたメソッドです。
メソッドというのはざっくりうとドッドで繋いで書く関数です。

今回の場合、要素.getElementById()というように要素にドットで繋いでかかないといけないのに、ただの関数のように扱っています。
そんなものは存在しないのでエラーが起きています。

「要素」の部分は、指定した要素の中で、該当のidをもつ要素を検索してくれるのですが、特に指定しない場合はdocumentから開始します。

✅ 正しい書き方

if(document.getElementById('#outbound').checked == true) {

不具合の原因

JavaScriptファイルというのは、ページ読み込み時に一度だけ読み込まれ実行されます。
ですので質問者様のコードは（エラーが出ない状態でも）ページ読み込み時に一度だけ実行され、以降はラジオボタンを押しても何も変化はありません。

何か特定の動作をした時（＝イベントが起こった時）に処理を実行したいのであれば、そのようにコードを書く必要があります。
それがイベントハンドラーだとかイベントリスナーと呼ばれるものです。

やり方は数通りありますが、現在は.addEventListener()というイベントリスナーでイベントの設定を行う方法が主流です。

コード例

ということで、ラジオボタンの状態（チェックされたりはずされたい）が変化した時に関数が実行されるようなコードを書きましょう。

• 動作確認用サンプル：https://jsfiddle.net/w6fk4pog/

<div id="radio-box-wrap" class="radio-box-wrap"> <!-- idを追加しました -->
  <div class="radio-box">
    <input type="radio" name="boundSelect" value="out" checked="checked" id="outbound">
    <label for="outbound" class="radio-box__label">下り（京都～大阪）</label>
  </div>
  <div class="radio-box">
    <input type="radio" name="boundSelect" value="in" id="inbound">
    <label for="inbound" class="radio-box__label">上り（大阪～京都）</label>
  </div>
</div>

<!--div class="radio-box"のinput にcheckがあるか無いかで表示を切り変えたい要素。-->
<div id="box_out" class="box_out"> <!-- ページ読み込み時は表示させておくため、noneを削除しました -->
  <select>
    <option value="out_1">2023年1月13日</option>
    <option value="out_2">2023年1月24日</option>
    <option value="out_3">2023年2月3日</option>
  </select>
</div>
<div id="box_in" class="box_in" style="display:none">
  <select>
    <option value="in_1">2023年1月15日</option>
    <option value="in_2">2023年1月26日</option>
    <option value="in_3">2023年325日</option>
  </select>
</div>

// 要素の取得
const radioWrapper = document.getElementById('radio-box-wrap');

// イベントリスナーの設定（要素が変化した時に、toggleBox関数を実行）
radioWrapper.addEventListener('change', toggleBox);

// 要素のdisplay:block/noneを切り替える関数
function toggleBox(event) {
  // 選択されたラジオボタンのvalueを取得
  const currentRadioVal = event.target.value;
  // その反対のvalueを代入（↑がinではなかったら、inを代入。inだったらoutを代入）
  const anotherVal = currentRadioVal !== 'in' ? 'in' : 'out';

  // セレクトボックス2つを取得
  const elementToShow = document.getElementById(`box_${currentRadioVal}`);
  const elementToHide = document.getElementById(`box_${anotherVal}`);

  // それぞれblockとnoneを設定する
  elementToShow.style.display = 'block';
  elementToHide.style.display = 'none';
}

Answer 3

こんな感じで出来ます。

  const switchBox = value => {
    document.querySelectorAll('div[class^=box]').forEach(div => { 
      div.style.display = div.id.endsWith(value) ? 'block' : 'none';
    });
  }
  
  document.querySelector('.radio-box-wrap').addEventListener(
      'change',
      ({ target: { value }}) => switchBox(value)
    );
  
  // 初期表示では「下り」のselectが表示されているようにする。
  switchBox('out');

• 参考 👉 https://codepen.io/alphabeta12/pen/yLEwrdR?editors=1010

Answer 4

一方を elem.style.display = "block" としたら他方は elem.style.display = "none" とするのでは？

あと、ラジオボタンの change イベントのリスナで表示非表示を制御しないと望む動きにならないはずですが、質問のコードにはそれが見当たりません。どうなっているのですか？

スクリプトを以下のようにしてみたらどうなりますか？

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("outbound").addEventListener("change", setDisplayAttr);
            document.getElementById("inbound").addEventListener("change", setDisplayAttr);
        }

        function setDisplayAttr() {
            if (document.getElementById('outbound').checked == true) {
                let elem = document.getElementById("box_out");
                elem.style.display = "block";
                let elem2 = document.getElementById("box_in");
                elem2.style.display = "none";
            }

            if (document.getElementById('inbound').checked == true) {
                let elem = document.getElementById("box_in");
                elem.style.display = "block";
                let elem2 = document.getElementById("box_out");
                elem2.style.display = "none";
            }
        }        
    </script>

Answer 5

自分が思っていた以上に、処理の内容が必要でした。。。
また、さまざまな処理の書き方があり、もっと勉強しないいけないな。
と痛感しております。

返信が遅くなってしまい大変申し訳ありませんでした。
コメント頂いた皆さん、本当にどうもありがとうございました。
おかげさまで実装できました。