ラジオボタンの選択状況（組み合わせ）によって特定の画像を表示させたい場合。

Question

前提・実現したいこと

※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>

Comments

[i_sugiyama_tomo]

動作させるところの関数名が「cangeA」「cangeB」になってるんですけど「changeA」「changeB」に直したらどうなります？

[_L9u7c4i0a]

すみませんでした。これはミスです。直しましたがプログラムは動きませんでした。

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[_L9u7c4i0a]

コードを囲みました。なんだか引き締まった感じに表示されますね。

Answer 1

こんな感じですかね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[name=ei],[name=suu]'),function(x){
    x.addEventListener('change',function(e){
      var v1=document.querySelector('[name=ei]:checked').value;
      var v2=document.querySelector('[name=suu]:checked').value
      document.querySelector('#wear').src=v1+v2+".png";
    });
  });
});

</script>

<img src="A1.png" name="wear" id="wear">
<label><input type="radio" name="ei" value="A" checked>A</label>
<label><input type="radio" name="ei" value="B">B</label>
<label><input type="radio" name="suu" value="1" checked>1</label>
<label><input type="radio" name="suu" value="2">2</label>

Comments

[_L9u7c4i0a]

要点を把握した最適なコードですね。
シンプルで短くても、ちゃんと実装できていました。
ifを使わず出来たなんてすごいです。
ありがたく参考にさせていただきますね。
この度はコードを書いてくださってありがとうございました。

Answer 2

プログラムの基本的にいっぱい間違いがあるので一つ一つ解説しますね。

1. まず関数は先に定義すること。なのでこの場合はJavaScriptを上に書いてください（phaze01）
2. 次にラジオボタンを押すたびに変更するのであればすべてのラジオボタンに動きの引き金となる「onClick=」をつけてください。このときJSのプログラムで分岐させて記載するので一つの関数で処理します。なので関数名は同じにします（phaze02）
3. JSプログラムを書く場合、変更するものを予め変数に呼び出しておく必要があります。（phaze03）
4. まずei[0]がcheckedかで分岐させてsuu[0]がcheckedか確認してあたってればsrcを変えます。その次にsuu[1]を確認します。ei[0]がcheckedでなければei[1]がcheckedか確認してsuu[0]がcheckedか確認します。（phaze04）

とこれくらい手直しが必要だったので、もう少し文献を読んで工夫できると良かったと思います。

<!--ここからjsプログラムです-->
<!--phaze01-->
<SCRIPT type="text/javascript">
<!--
function changeImg(){
var ei = document.getElementsByName("ei");//phaze03
var suu = document.getElementsByName("suu");//phaze03
       //phaze04	
       if(ei[0].checked){
		if(suu[0].checked){
		document.wear.src = "A1.png";
		}else{
		document.wear.src = "A2.png";
		}
	}else{
		if(suu[1].checked){
		document.wear.src = "B1.png";
		}else{
		document.wear.src = "B2.png";
		}
	}
}
-->
</SCRIPT>
画像が表示される場所になります。↓
<p><img src="A1.png" name="wear"></p>

<!--ラジオボタンの「A」と「B」です-->
<p>
<label>A<input type="radio" name="ei" onClick="changeImg();" checked></label><!--phaze02-->
<label>B<input type="radio" name="ei" onClick="changeImg();"></label><!--phaze02-->
</p>
<!--ラジオボタンの「1」と「2」です-->
<p>
<label>1<input type="radio" name="suu" onClick="changeImg();" checked></label><!--phaze02-->
<label>2<input type="radio" name="suu" onClick="changeImg();"></label><!--phaze02-->
</p>

Comments

[_L9u7c4i0a]

お答えに感謝致します。
私の盲点が多いせいか間違いだらけでしたね。

親切な説明でわかりやすかったです。
この度はコードを書いてくださってありがとうございました。

Answer 3

ラジオボタンの要素を取得するところが間違っていると思います。
inputタグをformタグで囲ってから”document.form名.input名”で取るのがわかりやすいかと

  <form name="form2">
    <input type="radio" name="suu" checked>
    <input type="radio" name="suu">
  </form>

    function changeA() {
      if (document.form2.suu[0].checked) {
      }
      if (document.form2.suu[1].checked) {
      }
    }

Comments

[_L9u7c4i0a]

試してみましたが画像は切り替わっていません。
私が書いたプログラムが根本的に間違っている可能性も十分ありますので。
お答えいただきありがとうございました。