- ベストアンサー
ラジオボタンの切替で表示する内容を変更
- 上部に複数のラジオボタンがあり、クリックしたタイトルに合わせた内容を表示する方法について教えてください。
- ラジオボタンのonClickイベントで値を取得し、スクリプトを切り換える方法を教えてください。
- 初期表示時には(1)の内容を表示し、ラジオボタンの切替で(2)の内容を表示する方法を教えてください。
- mapple55
- お礼率68% (11/16)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
状況がよくわかりませんが、単に表示をきりかえるだけなら以下のような やり方になると思います。 <html> <head> <style type="text/css"> #contents2,#contents3,#contents4{ display:none; } </style> <script language=javascript> function view(divId,divClass){ var divs=document.getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ if(divs[i].className==divClass){ if(divs[i].id==divId) divs[i].style.display="block"; else divs[i].style.display="none"; } } } </script> </head> <body> <form> <input type="radio" name="category" id="category1" onClick="view('contents1','contensGroup')" checked><label for="category1">エリア１</label> <input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア２</label> <input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア３</label> <input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア４</label> </form> <div id="contents1" class="contensGroup">内容１</div> <div id="contents2" class="contensGroup">内容２</div> <div id="contents3" class="contensGroup">内容３</div> <div id="contents4" class="contensGroup">内容４</div> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございます！おかげで出来ました！ 実は貼り付けたjavascript部分が不完全だったため 実際に動かず何をやりたいのかも試せず意味不明だったかと思います。 それにも関わらずこんな良答頂けるとは...感謝です。 ちなみに以下のようにラジオボタンからセレクトボックスにも応用できました。 本当に使い勝手の良いスクリプトありがとうございました！！ <form name="frm"> <SELECT name="sel" onChange="view(document.frm.sel.value,'contensGroup')"> <OPTION value="contents1">選択肢1 <OPTION value="contents2">選択肢2 <OPTION value="contents3">選択肢3 <OPTION value="contents4">選択肢4 </SELECT>