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

やりたいこと

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

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

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

html
1    <div class="container">
2      <p>１．Webサイト</p>
3      <ul class="radioBox">
4        <li>
5          <label><input class="" type="radio" name="Webサイト" value="あり" onclick="checkradio01('block');">あり</label>
6        </li>
7        <li>
8          <label><input class="" type="radio" name="Webサイト" value="なし" onclick="checkradio01('none');" checked>なし</label>
9        </li>
10      </ul>
11      <div id="sample01" class="content">URL：<input type="text" name="" size="30"></div>
12    </div>
13
14    <div class="container">
15      <p>２．求人情報</p>
16      <ul class="radioBox">
17        <li>
18          <label><input class="" type="radio" name="求人情報" value="あり" onclick="checkradio02('block');">あり</label>
19        </li>
20        <li>
21          <label><input class="" type="radio" name="求人情報" value="なし" onclick="checkradio02('none');" checked>なし</label>
22        </li>
23      </ul>
24      <div id="sample02" class="content">
25        <p>募集内容</p>
26        <textarea name="" rows="4" cols="40"></textarea></div>
27    </div>
28    <div class="container">
29      <p>３．カフェスペース</p>
30      <ul class="radioBox">
31        <li>
32          <label><input class="" type="radio" name="カフェスペース" value="あり" onclick="checkradio03('block');">あり</label>
33        </li>
34        <li>
35          <label><input class="" type="radio" name="カフェスペース" value="なし" onclick="checkradio03('block');">なし</label>
36        </li>
37        <li>
38          <label><input class="" type="radio" name="カフェスペース" value="未回答" onclick="checkradio03('none');" checked>未回答</label>
39        </li>
40      </ul>
41      <div id="sample03" class="content">メモ：<input type="text" name="" size="30"></div>
42    </div>
43    <div class="container">
44      <p>４．駐輪場</p>
45      <ul class="radioBox">
46        <li>
47          <label><input class="" type="radio" name="駐輪場" value="あり" onclick="checkradio04('block');">あり</label>
48        </li>
49        <li>
50          <label><input class="" type="radio" name="駐輪場" value="なし" onclick="checkradio04('none');">なし</label>
51        </li>
52        <li>
53          <label><input class="" type="radio" name="駐輪場" value="未回答" onclick="checkradio04('none');" checked>未回答</label>
54        </li>
55      </ul>
56      <div id="sample04" class="content"><input type="text" name="" size="10">台</div>
57    </div>
58    <div class="container">
59      <p>５．キッズスペース</p>
60      <ul class="radioBox">
61        <li>
62          <label><input class="" type="radio" name="キッズスペース" value="あり" onclick="checkradio05('block');">あり</label>
63        </li>
64        <li>
65          <label><input class="" type="radio" name="キッズスペース" value="なし" onclick="checkradio05('block');">なし</label>
66        </li>
67        <li>
68          <label><input class="" type="radio" name="キッズスペース" value="未回答" onclick="checkradio05('none');" checked>未回答</label>
69        </li>
70      </ul>
71      <div id="sample05" class="content">メモ：<input type="text" name="" size="30"></div>
72    </div>
73    <div class="container">
74      <p>６．書籍スペース</p>
75      <ul class="radioBox">
76        <li>
77          <label><input class="" type="radio" name="書籍スペース" value="あり" onclick="checkradio06('block');">あり</label>
78        </li>
79        <li>
80          <label><input class="" type="radio" name="書籍スペース" value="なし" onclick="checkradio06('none');">なし</label>
81        </li>
82        <li>
83          <label><input class="" type="radio" name="書籍スペース" value="未回答" onclick="checkradio06('none');" checked>未回答</label>
84        </li>
85      </ul>
86      <div id="sample06" class="content">
87        <p>蔵書のカテゴリー</p>
88        <label><input type="checkbox" name="蔵書のカテゴリー" value="ファミリー">ファミリー</label>
89        <label><input type="checkbox" name="蔵書のカテゴリー" value="コメディ">コメディ</label>
90        <label><input type="checkbox" name="蔵書のカテゴリー" value="恋愛">恋愛</label>
91        <label><input type="checkbox" name="蔵書のカテゴリー" value="ドラマ">ドラマ</label>
92        <label><input type="checkbox" name="蔵書のカテゴリー" value="サスペンス">サスペンス</label>
93        <label><input type="checkbox" name="蔵書のカテゴリー" value="ホラー">ホラー</label>
94      </div>
95    </div>
96
97    <div class="container">
98      <p>７．年齢制限</p>
99      <ul class="radioBox">
100        <li>
101          <label><input class="" type="radio" name="年齢制限" value="あり" onclick="checkradio07('block');">あり</label>
102        </li>
103        <li>
104          <label><input class="" type="radio" name="年齢制限" value="なし" onclick="checkradio07('none');">なし</label>
105        </li>
106        <li>
107          <label><input class="" type="radio" name="年齢制限" value="未回答" onclick="checkradio07('none');" checked>未回答</label>
108        </li>
109      </ul>
110      <div id="sample07" class="content">
111        <p></p>
112        <label><input type="radio" name="年齢制限あり" value="小学生以上">小学生以上</label>
113        <label><input type="radio" name="年齢制限あり" value="中学生以上">中学生以上</label>
114        <label><input type="radio" name="年齢制限あり" value="20歳以上">20歳以上</label>
115      </div>
116    </div>

Javascript
1      function checkradio01( disp ) {
2        document.getElementById('sample01').style.display = disp;
3      }
4      function checkradio02( disp ) {
5        document.getElementById('sample02').style.display = disp;
6      }
7      function checkradio03( disp ) {
8        document.getElementById('sample03').style.display = disp;
9      }
10      function checkradio04( disp ) {
11        document.getElementById('sample04').style.display = disp;
12      }
13      function checkradio05( disp ) {
14        document.getElementById('sample05').style.display = disp;
15      }
16      function checkradio06( disp ) {
17        document.getElementById('sample06').style.display = disp;
18      }
19      function checkradio07( disp ) {
20        document.getElementById('sample07').style.display = disp;
21      }

css
1      .container {
2        padding-bottom: 15px;
3        border-bottom: 1px solid #ccc;
4      }
5      .radioBox {
6        display: inline-flex;
7        margin-top: 0;
8        padding: 15px;
9        background: #e6e6fa;
10      }
11      .radioBox li {
12        list-style: none;
13      }
14      .content {
15        display: none;
16      }

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

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

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

html
1    <div id="area_hoge4_1" class="showBox">
2    <input type="radio" name="hoge4_1" value="" checked="checked" /> 表示
3    <input type="radio" name="hoge4_1" value="0" /> 非表示
4    <p class="show">ここを表示する</p>
5    </div>
6    <div id="area_hoge4_2" class="showBox">
7      <div>
8        <input type="radio" name="hoge4_2" value="" checked="checked" /> 表示
9        <input type="radio" name="hoge4_2" value="0" /> 非表示
10      </div>
11      <div class="show">ここを表示する</div>
12    </div>
13    <style>
14      .showBox input[type=radio][value="0"]:checked ~ .show{display:none;}
15    </style>

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

行動規範の内容に同意します

回答2件

ベストアンサー

下記でどうでしょうか。

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

js
1window.onload = function(){
2  var radios = document.querySelectorAll("input[type='radio']");
3  for (i = 0; i < radios.length; i++) {
4    radios[i].addEventListener("change", radio_OnChange);
5  }
6}
7
8function radio_OnChange(event) {
9  let content = event.target.closest(".radioBox").nextElementSibling;
10  content.style.display = (event.target.value == "あり") ? "block": "";
11}

おまけ

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

投稿2021/03/01 16:58

総合スコア34073

2021/03/01 23:29

おぉー。 closest(".radioBox").nextElementSibling かゆい所のその向こうにまで手の届くメソッドがJavaScriptには、ときにあったりしますね。(^^ 切り詰めるほど例外対応で苦労するので、そのトレードオフの采配はよきように。＞質問者さん CSSだけでやる方法、こういうのもできるんですね。一見、ロジックが入ってないように見えるのが魅力♪

pondering

2021/03/02 03:03

回答をいただきありがとうございます。『次の要素を取得して、表示/非表示を切り替える』際に、ありだけ表示のケース、あり・なしで表示のケースまた、こちらには記載しなかったのですが 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

2021/03/02 03:21

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

hatena19

2021/03/02 03:28

<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

2021/03/02 04:55

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

2021/03/02 05:42

あっ、すみません。最近jQueryでの回答をしたので混乱してました。JSなら下記です。 content.style.display = (event.target.classList.contains("show")) ? "block": "";

pondering

2021/03/02 06:33

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

行動規範の内容に同意します

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

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

javascript
1window.onload = function(){
2	 var radios = document.querySelectorAll("input[type='radio']");
3	 for (i = 0; i < radios.length; i++) {
4		radios[i].addEventListener("change", radio_OnChange);
5	 }
6}
7
8function radio_OnChange(event) {
9	var displayChangeElement = null;
10	switch (event.target.name) {
11	case "Webサイト":
12		displayChangeElement = document.getElementById('sample01')
13	    break;
14    case "求人情報":
15		displayChangeElement = document.getElementById('sample02')
16    	break;
17    case "カフェスペース":
18		displayChangeElement = document.getElementById('sample03')
19    	break;
20    case "駐輪場":
21		displayChangeElement = document.getElementById('sample04')
22    	break;
23    case "キッズスペース":
24		displayChangeElement = document.getElementById('sample05')
25    	break;
26    case "書籍スペース":
27		displayChangeElement = document.getElementById('sample06')
28    	break;
29    case "年齢制限":
30		displayChangeElement = document.getElementById('sample07')
31    	break;
32	}	
33	if (displayChangeElement != null) {
34		displayChangeElement.style.display = (event.target.value == "あり") ? "block": "none";
35	}
36}

投稿2021/03/01 13:50

編集2021/03/01 13:52

FromMZ1500

総合スコア496

pondering

2021/03/02 02:52

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

行動規範の内容に同意します

あなたの回答