ラジオボタンで表示・非表示を切り替えるコードを汎用的にしたい

Question

やりたいこと

ラジオボタンの選択肢によって、表示・非表示を切り替えたいです。
フォーム同士の連動はなく、それぞれの項目に対して表示・非表示を切り替えを行いたいです。

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

色々調べながら、現状のものを作成し、やりたい動きは下記コードでなんとかできてたのですが
ソースコードに同じ処理を何度も書いてしまっている状態で、ある程度まとめたいのですが方法がわかりません。
新たに項目が増えたとき（checkradio09、checkradio10・・・など）にも対応できたらいいのに…と考えて質問させていただきます。

    <div class="container">
      <p>１．Webサイト</p>
      <ul class="radioBox">
        <li>
          <label><input class="" type="radio" name="Webサイト" value="あり" onclick="checkradio01('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="Webサイト" value="なし" onclick="checkradio01('none');" 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 class="" type="radio" name="求人情報" value="あり" onclick="checkradio02('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="求人情報" value="なし" onclick="checkradio02('none');" checked>なし</label>
        </li>
      </ul>
      <div id="sample02" class="content">
        <p>募集内容</p>
        <textarea name="" rows="4" cols="40"></textarea></div>
    </div>
    <div class="container">
      <p>３．カフェスペース</p>
      <ul class="radioBox">
        <li>
          <label><input class="" type="radio" name="カフェスペース" value="あり" onclick="checkradio03('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="カフェスペース" value="なし" onclick="checkradio03('block');">なし</label>
        </li>
        <li>
          <label><input class="" type="radio" name="カフェスペース" value="未回答" onclick="checkradio03('none');" checked>未回答</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 class="" type="radio" name="駐輪場" value="あり" onclick="checkradio04('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="駐輪場" value="なし" onclick="checkradio04('none');">なし</label>
        </li>
        <li>
          <label><input class="" type="radio" name="駐輪場" value="未回答" onclick="checkradio04('none');" checked>未回答</label>
        </li>
      </ul>
      <div id="sample04" class="content"><input type="text" name="" size="10">台</div>
    </div>
    <div class="container">
      <p>５．キッズスペース</p>
      <ul class="radioBox">
        <li>
          <label><input class="" type="radio" name="キッズスペース" value="あり" onclick="checkradio05('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="キッズスペース" value="なし" onclick="checkradio05('block');">なし</label>
        </li>
        <li>
          <label><input class="" type="radio" name="キッズスペース" value="未回答" onclick="checkradio05('none');" checked>未回答</label>
        </li>
      </ul>
      <div id="sample05" class="content">メモ：<input type="text" name="" size="30"></div>
    </div>
    <div class="container">
      <p>６．書籍スペース</p>
      <ul class="radioBox">
        <li>
          <label><input class="" type="radio" name="書籍スペース" value="あり" onclick="checkradio06('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="書籍スペース" value="なし" onclick="checkradio06('none');">なし</label>
        </li>
        <li>
          <label><input class="" type="radio" name="書籍スペース" value="未回答" onclick="checkradio06('none');" checked>未回答</label>
        </li>
      </ul>
      <div id="sample06" class="content">
        <p>蔵書のカテゴリー</p>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="ファミリー">ファミリー</label>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="コメディ">コメディ</label>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="恋愛">恋愛</label>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="ドラマ">ドラマ</label>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="サスペンス">サスペンス</label>
        <label><input type="checkbox" name="蔵書のカテゴリー" value="ホラー">ホラー</label>
      </div>
    </div>

    <div class="container">
      <p>７．年齢制限</p>
      <ul class="radioBox">
        <li>
          <label><input class="" type="radio" name="年齢制限" value="あり" onclick="checkradio07('block');">あり</label>
        </li>
        <li>
          <label><input class="" type="radio" name="年齢制限" value="なし" onclick="checkradio07('none');">なし</label>
        </li>
        <li>
          <label><input class="" type="radio" name="年齢制限" value="未回答" onclick="checkradio07('none');" checked>未回答</label>
        </li>
      </ul>
      <div id="sample07" class="content">
        <p></p>
        <label><input type="radio" name="年齢制限あり" value="小学生以上">小学生以上</label>
        <label><input type="radio" name="年齢制限あり" value="中学生以上">中学生以上</label>
        <label><input type="radio" name="年齢制限あり" value="20歳以上">20歳以上</label>
      </div>
    </div>

      function checkradio01( disp ) {
        document.getElementById('sample01').style.display = disp;
      }
      function checkradio02( disp ) {
        document.getElementById('sample02').style.display = disp;
      }
      function checkradio03( disp ) {
        document.getElementById('sample03').style.display = disp;
      }
      function checkradio04( disp ) {
        document.getElementById('sample04').style.display = disp;
      }
      function checkradio05( disp ) {
        document.getElementById('sample05').style.display = disp;
      }
      function checkradio06( disp ) {
        document.getElementById('sample06').style.display = disp;
      }
      function checkradio07( disp ) {
        document.getElementById('sample07').style.display = disp;
      }

      .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;
      }

試したこと、考えたことなど

引数としてIDを渡せば汎用的に使えるのかと考えましたが、
今回、項目によって「未回答」だけはdisplay:none、
「未回答」、「なし」のときはdisplay:none;など
様々なパターンがあり、HTML内に【　onclick="checkradio01('none');"　】などを入れている時点でダメなのかも…と思い、、、

また、CSSのみで表示・非表示を切り替える方法も試しましたが、
要素を囲んでいくと反応しなくなってしまいました。

    <div id="area_hoge4_1" class="showBox">
    <input type="radio" name="hoge4_1" value="" checked="checked" /> 表示
    <input type="radio" name="hoge4_1" value="0" /> 非表示
    <p class="show">ここを表示する</p>
    </div>
    <div id="area_hoge4_2" class="showBox">
      <div>
        <input type="radio" name="hoge4_2" value="" checked="checked" /> 表示
        <input type="radio" name="hoge4_2" value="0" /> 非表示
      </div>
      <div class="show">ここを表示する</div>
    </div>
    <style>
      .showBox input[type=radio][value="0"]:checked ~ .show{display:none;}
    </style>

ご教示いたきたいです。よろしくお願いいたします。

Answer 1

下記でどうでしょうか。

クリックされたラジオボタンの祖先の.radioBox の次の要素を取得して、
それの表示/非表示を切り替える。

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.value == "あり") ? "block": "";
}

おまけ

CSSだけでやる方法も考えてみたけど、けっこう面倒だった。

CodePenサンプル

Comments

[FromMZ1500]

おぉー。
closest(".radioBox").nextElementSibling
かゆい所のその向こうにまで手の届くメソッドがJavaScriptには、ときにあったりしますね。(^^

切り詰めるほど例外対応で苦労するので、そのトレードオフの采配はよきように。＞ 質問者さん

CSSだけでやる方法、こういうのもできるんですね。
一見、ロジックが入ってないように見えるのが魅力♪

[pondering]

回答をいただきありがとうございます。

『次の要素を取得して、表示/非表示を切り替える』際に、
あり だけ表示のケース、あり・なし で表示のケース
また、こちらには記載しなかったのですが
valueが あり・なし・未回答以外の表記（例：募集する・募集しない）などがあったため
window.onload では複数回設定できないかと思い、
window.addEventListener('load', function() {}にしてみました。

,,,
//ありだけ表示
window.addEventListener('load', function() {
var radios = document.querySelectorAll(".radioArea 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(".radioArea").nextElementSibling;
content.style.display = (event.target.value == "あり") ? "block": "";
}

//求人掲載するときだけ表示
window.addEventListener('load', function(){
var radios01 = document.querySelectorAll(".radioArea01 input[type='radio']");
for (i = 0; i < radios01.length; i++) {
radios01[i].addEventListener("change", radio_OnChange01);
}
})

function radio_OnChange01(event) {
let content = event.target.closest(".radioArea01").nextElementSibling;
content.style.display = (event.target.value == "掲載する") ? "block": "";
}

//託児サービス対応するときだけ表示
window.addEventListener('load', function(){
var radios02 = document.querySelectorAll(".radioArea02 input[type='radio']");
for (i = 0; i < radios02.length; i++) {
radios02[i].addEventListener("change", radio_OnChange02);
}
})

function radio_OnChange02(event) {
let content = event.target.closest(".radioArea02").nextElementSibling;
content.style.display = (event.target.value == "対応") ? "block": "";
}

//未回答だけ非表示
window.addEventListener('load', function(){
var radios03 = document.querySelectorAll(".radioArea03 input[type='radio']");
for (i = 0; i < radios03.length; i++) {
radios03[i].addEventListener("change", radio_OnChange03);
}
})

function radio_OnChange03(event) {
let content = event.target.closest(".radioArea03").nextElementSibling;
content.style.display = (event.target.value !== "未回答") ? "block": "";
}
,,,

各々クラス等を変更したところ問題なく動いていそうなのですが
もう少しテストしてみたいと思っております。

また、CSSで行う方法までありがとうございます！
CSS Gridを理解しきれていないので、見比べながらどのようになっているのか
勉強させていただきます。（返信まで時間がかかってしまいそうだったので、先にコメントさせていただきました。）

[hatena19]

ボタンのvalue が"あり"かどうかで判断しているところを、
ボタンのクラスに例えば show があれば表示とか、カスタムデータ属性（data-*） を付加してそれで判断するとにすれば簡単かと。

[hatena19]

<li>
<label><input class="show" type="radio" name="カフェスペース" value="あり">あり</label>
</li>
<li>
<label><input class="show" type="radio" name="カフェスペース" value="なし">なし</label>
</li>
<li>
<label><input class="" type="radio" name="カフェスペース" value="未回答" checked>未回答</label>
</li>

content.style.display = (event.target.hasClass("show")) ? "block": "";

[pondering]

ありがとうございます！
さっそくクラスで判断する場合で下記のようにしてみたのですが
表示されなくなってしまいまして…変更場所が間違っているのでしょうか。

<ul class="radioBox">
<li>
<label><input class="show" type="radio" name="カフェスペース" value="あり">あり</label>
</li>
<li>
<label><input class="show" type="radio" name="カフェスペース" value="なし">なし</label>
</li>
<li>
<label><input class="" type="radio" name="カフェスペース" value="未回答" checked>未回答</label>
</li>
</ul>

<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.hasClass("show")) ? "block": "";
}
</script>

[hatena19]

あっ、すみません。最近jQueryでの回答をしたので混乱してました。JSなら下記です。

content.style.display = (event.target.classList.contains("show")) ? "block": "";

[pondering]

回答くださってありがとうございます、動きました！
そして、カスタムデータ属性（data-*） を使った方法もこれから試してみます！
本当にありがとうございました。

Answer 2

イベントリスナーを自動的＆機械的につけて、同一functionでまとめ書きするぐらいでしょうか。
radioのnameと表示切替divのidを関連付けしておけばswitch文も1行でいけるでしょう。
ex. document.getElementById("div_" + event.target.name)

あまり検証してないけどsourceでこんな感じ。

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) {
	var displayChangeElement = null;
	switch (event.target.name) {
	case "Webサイト":
		displayChangeElement = document.getElementById('sample01')
	    break;
    case "求人情報":
		displayChangeElement = document.getElementById('sample02')
    	break;
    case "カフェスペース":
		displayChangeElement = document.getElementById('sample03')
    	break;
    case "駐輪場":
		displayChangeElement = document.getElementById('sample04')
    	break;
    case "キッズスペース":
		displayChangeElement = document.getElementById('sample05')
    	break;
    case "書籍スペース":
		displayChangeElement = document.getElementById('sample06')
    	break;
    case "年齢制限":
		displayChangeElement = document.getElementById('sample07')
    	break;
	}	
	if (displayChangeElement != null) {
		displayChangeElement.style.display = (event.target.value == "あり") ? "block": "none";
	}
}

Comments

[pondering]

回答をいただきありがとうございます。
記載いただいたコードでありの時はできたのですが、
なしの場合でもメモ表示する場合、など、色々なパターンをやってみたいので
触りながら勉強させていただきます。
radioのnameと表示切替divのidを関連付けしておけばswitch文も1行でいけるでしょう。
＞自分の理解度ではすぐにはできないと思いますが、ぜひ試してみたいと思います！