質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

tkm0604
Fukusuke0604

総合スコア538

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

5回答

0グッド

0クリップ

368閲覧

投稿2022/12/09 05:30

編集2022/12/09 05:41

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

html

1<div class="radio-box-wrap"> 2 <div class="radio-box"> 3 <input type="radio" name="boundSelect" value="out" checked="checked" id="outbound"> 4 <label for="outbound" class="radio-box__label">下り(京都~大阪)</label> 5 </div> 6 <div class="radio-box"> 7 <input type="radio" name="boundSelect" value="in" id="inbound"> 8 <label for="inbound" class="radio-box__label">上り(大阪~京都)</label> 9 </div> 10</div> 11 12<!--div class="radio-box"のinput にcheckがあるか無いかで表示を切り変えたい要素。--> 13 <div id="box_out" class="box_out_a" style="display:none"> 14 <select > 15 <option value="out_1">2023年1月13日</option> 16 <option value="out_2">2023年1月24日</option> 17 <option value="out_3">2023年2月3日</option> 18 </select> 19 </div> 20 <div id="box_in" class="box_in_a" style="display:none"> 21 <select> 22 <option value="in_1">2023年1月15日</option> 23 <option value="in_2">2023年1月26日</option> 24 <option value="in_3">2023年325日</option> 25 </select> 26 </div>

javascript

1if(getElementById('#outbound').checked == true){ 2 let elem = document.getElementById("#box_out"); 3 elem.style.display = "block"; 4}else { 5 let elem = document.getElementById("#box_in"); 6 elem.style.display = "block"; 7}

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

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/12/09 05:51

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

2022/12/09 05:59

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

2022/12/09 06:04

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

2022/12/09 06:05

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

2022/12/09 14:06

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

2022/12/11 02:54

返信がおそくなり大変申し訳ありませんでした。 自分が思っていた以上に処理を書いてあげなければいけなかったですね。。。 もっと勉強します。

回答5

3

こんな感じで

javascript

1<script> 2document.addEventListener('change', (e)=>{ 3 const v=document.querySelector('[name="boundSelect"]:checked')?.value; 4 box_out.style.display=v=="out"?"block":"none"; 5 box_in.style.display =v=="in"?"block":"none"; 6}); 7window.addEventListener('DOMContentLoaded', ()=>{ 8 const ce = new CustomEvent("HTMLEvents"); 9 ce.initEvent('change', true, true ); 10 document.dispatchEvent(ce); 11}); 12</script> 13<div class="radio-box-wrap"> 14 <div class="radio-box"> 15 <input type="radio" name="boundSelect" value="out" id="outbound"> 16 <label for="outbound" class="radio-box__label">下り(京都~大阪)</label> 17 </div> 18 <div class="radio-box"> 19 <input type="radio" name="boundSelect" value="in" id="inbound"> 20 <label for="inbound" class="radio-box__label">上り(大阪~京都)</label> 21 </div> 22</div> 23 24 <div id="box_out" class="box_out_a" style="display:none"> 25 out<select > 26 <option value="out_1">2023113</option> 27 <option value="out_2">2023124</option> 28 <option value="out_3">202323</option> 29 </select> 30 </div> 31 <div id="box_in" class="box_in_a" style="display:none"> 32 in<select> 33 <option value="in_1">2023115</option> 34 <option value="in_2">2023126</option> 35 <option value="in_3">2023325</option> 36 </select> 37 </div>

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

投稿2022/12/09 06:05

yambejp

総合スコア108937

Fukusuke0604❤️を押しています
spoofy_dragon, dtakkiyを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2

エラーの原因

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

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

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

javascript

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

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

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

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

✅ 正しい書き方

javascript

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

不具合の原因

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

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

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

コード例

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

html

1<div id="radio-box-wrap" class="radio-box-wrap"> <!-- idを追加しました --> 2 <div class="radio-box"> 3 <input type="radio" name="boundSelect" value="out" checked="checked" id="outbound"> 4 <label for="outbound" class="radio-box__label">下り(京都~大阪)</label> 5 </div> 6 <div class="radio-box"> 7 <input type="radio" name="boundSelect" value="in" id="inbound"> 8 <label for="inbound" class="radio-box__label">上り(大阪~京都)</label> 9 </div> 10</div> 11 12<!--div class="radio-box"のinput にcheckがあるか無いかで表示を切り変えたい要素。--> 13<div id="box_out" class="box_out"> <!-- ページ読み込み時は表示させておくため、noneを削除しました --> 14 <select> 15 <option value="out_1">2023年1月13日</option> 16 <option value="out_2">2023年1月24日</option> 17 <option value="out_3">2023年2月3日</option> 18 </select> 19</div> 20<div id="box_in" class="box_in" style="display:none"> 21 <select> 22 <option value="in_1">2023年1月15日</option> 23 <option value="in_2">2023年1月26日</option> 24 <option value="in_3">2023年325日</option> 25 </select> 26</div>

javascript

1// 要素の取得 2const radioWrapper = document.getElementById('radio-box-wrap'); 3 4// イベントリスナーの設定(要素が変化した時に、toggleBox関数を実行) 5radioWrapper.addEventListener('change', toggleBox); 6 7// 要素のdisplay:block/noneを切り替える関数 8function toggleBox(event) { 9 // 選択されたラジオボタンのvalueを取得 10 const currentRadioVal = event.target.value; 11 // その反対のvalueを代入(↑がinではなかったら、inを代入。inだったらoutを代入) 12 const anotherVal = currentRadioVal !== 'in' ? 'in' : 'out'; 13 14 // セレクトボックス2つを取得 15 const elementToShow = document.getElementById(`box_${currentRadioVal}`); 16 const elementToHide = document.getElementById(`box_${anotherVal}`); 17 18 // それぞれblockとnoneを設定する 19 elementToShow.style.display = 'block'; 20 elementToHide.style.display = 'none'; 21}

投稿2022/12/09 06:07

編集2022/12/09 06:27
Cocode

総合スコア2104

Fukusuke0604❤️を押しています
ams2020を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

1

こんな感じで出来ます。

javascript

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

投稿2022/12/09 06:45

退会済みユーザー

退会済みユーザー

総合スコア0

Fukusuke0604❤️を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

1

ベストアンサー

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

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

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

JavaScript

1 <script type="text/javascript"> 2 window.onload = function () { 3 document.getElementById("outbound").addEventListener("change", setDisplayAttr); 4 document.getElementById("inbound").addEventListener("change", setDisplayAttr); 5 } 6 7 function setDisplayAttr() { 8 if (document.getElementById('outbound').checked == true) { 9 let elem = document.getElementById("box_out"); 10 elem.style.display = "block"; 11 let elem2 = document.getElementById("box_in"); 12 elem2.style.display = "none"; 13 } 14 15 if (document.getElementById('inbound').checked == true) { 16 let elem = document.getElementById("box_in"); 17 elem.style.display = "block"; 18 let elem2 = document.getElementById("box_out"); 19 elem2.style.display = "none"; 20 } 21 } 22 </script>

投稿2022/12/09 06:03

SurferOnWww

総合スコア17342

Fukusuke0604😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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

投稿2022/12/11 02:53

tkm0604

総合スコア538

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。