前提・実現したいこと
※4つのラジオボタンが用意されていることを前提に質問したいと思います。(html上です)
※それぞれのラジオボタンを「A」「B」「1」「2」と呼ぶことにします。
※AとBのnameは「ei」として、1と2のnameは「suu」としましょう。
※ちなみに、「A」と「1」は最初から選択されているということで。
では質問ですが、
最初の状態だとAと1が選択されていますよね。この状態では画像ファイル「A1.png」が表示されています。
次に、Aを選択している状態でラジオボタンの「2」を選択します。
この場合、画像ファイル「A2.png」が表示され、先ほど表示されていた「A1.png」と入れ替わります。
Bが選択されている場合も同じです。1が選択されたら~を、2が選択されたら~をという感じです。
※ここでのポイントは、1と2のボタンは印のようなものであり、実際プログラムが起動しているボタンは「A」と「B」と言うことです。
ボタン「A」や「B」は、ボタン「1」が選択されているか「2」が選択されているかを判断し、それによって違う結果を返しています。
そして大事な事は、選択肢が選択「されているか」であって、選択「したか」ではありません。選択した瞬間だけでなく、今は選択されている状態だとプログラムが認識する必要があります。
このような仕組みを作りたいのですが、jsだと、どのようなソースコードになるでしょうか?
下記の様にプログラムを書いてみたのですが、画像は切り替わりませんでした。
試したこと
<!--htmlです--> 画像が表示される場所になります。↓ <img src="A1.png" name="wear"> <!--ラジオボタンの「A」と「B」です--> <input type="radio" name="ei" onClick="changeA();" checked> <input type="radio" name="ei" onClick="changeB();"> </p> <!--ラジオボタンの「1」と「2」です--> <input type="radio" name="suu" checked> <input type="radio" name="suu"> <!--ここからjsプログラムです--> <SCRIPT type="text/javascript"> <!-- <!--ボタンAの動作です--> function changeA(){ if(document.suu.element[0].checked){ document.wear.src = "A1.png"; } if(document.suu.element[1].checked){ document.wear.src = "A2.png"; } } <!--ボタンBの動作です--> function changeB(){ if(document.suu.element[0].checked){ document.wear.src = "B1.png"; } if(document.suu.element[1].checked){ document.wear.src = "B2.png"; } } --> </SCRIPT>
回答3件
あなたの回答
tips
プレビュー