Q&A
質問タグが「Java」になっているので、「JavaScript」に変更されてはいかがでしょうか。
ラジオボタンのチェックが入っているかいないかで、要素（画像など）の表示切替を行うのが目的です。
大抵はonclickを使い、ボタンが押されてからJavaScriptを起動させますね。
しかしこれで一つ一つのボタンに対してコードを書いていると、ボタンの数が多い場合に効率的ではありません。
なのでどのラジオボタンがチェックされているかをjavascriptで把握して、それによって結果を返す仕組みにしたいです。
今回はボタンをチェックした時に該当する画像を表示するプログラムを書きました。
nameがkumaのボタンをチェックすると、kuma.pngの画像が表示されます。
これを上記のような仕組みにすることは可能でしょうか？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> img { width: 100px; height: 100px; margin: 10px; } </style> <script type="text/javascript"> function usa(){ document.animal_img.src = "usa.png"; } function kuma(){ document.animal_img.src = "kuma.png"; } </script> </head> <body> <input type="radio" name="animal" value="1" onclick="usa()">ウサギ <input type="radio" name="animal" value="2" onclick="kuma()">クマ</p> <img src="usa.png" name="animal_img"> </body> </html>
回答1件
0
ベストアンサー
最近のCSSはリッチなので，それくらいならJSを書く必要すらなかったりします
（代わりにCSSを工夫する必要はありますが，簡単に使い回せるので楽です）
デモ：https://thimbleprojects.org/liveasnotes/532250/
右上の「リミックス」ボタンから，コードの閲覧・編集ができます
html
1<div class="wrap"> 2 <input type="radio" name="myradio" id="img1" checked> 3 <label for="img1">Gray</label> 4 <img src="https://placehold.jp/300x300.png"> 5 6 <input type="radio" name="myradio" id="img2"> 7 <label for="img2">Blue</label> 8 <img src="https://placehold.jp/4a69a3/ffffff/300x300.png"> 9 10 <input type="radio" name="myradio" id="img3"> 11 <label for="img3">Green</label> 12 <img src="https://placehold.jp/32ab5e/ffffff/300x300.png"> 13</div>
抜粋すると，この辺が肝です
css
1img{ 2 position: absolute; 3 bottom: 0; 4 left: 0; 5 z-index: 1; 6} 7 8input[name="myradio"]:checked +label +img{ 9 z-index: 10; 10}
投稿2018/09/02 05:51
総合スコア1284
あなたの回答
tips
プレビュー
