※ ChatGPTを利用し、要約された質問です（原文：IMGタグのsrcを同時に変更することができない）
IMGタグのsrcを同時に変更する方法
このQ&Aのポイント
IMGタグのsrcを同時に変更するためには、JavaScriptを使用する必要があります。
要素のクラスやIDを指定して、対象のIMGタグを取得し、そのsrc属性を変更することができます。
この方法を使えば、複数のIMGタグのsrcを同時に変更することができます。
radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が１つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。
<html xml:lang="ja" lang="ja">
<head>
<title>radioボタンを押して3×3パターンの画像を切り替える</title>
<script type="text/javascript">
function imgChange(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "INPUT") return;
var inp = t.parentNode.getElementsByTagName("input");
var nnn = [], vvv = [];
for(i=0; node=inp[i++];){
if(node.type == "radio" && node.checked) {
nnn.push(node.name);
vvv.push(node.value);
}
}
var iB = document.getElementById('imgBOX');
var iBlen = iB.children.length;
for(i=0; iBlen>i; i++){
//処理前のalert
alert("before : src = "+iB.children[i].src);
//IMGタグのsrc通りの結果に。
if(iB.children[i].tagName != "IMG") continue;
for(j=0, node=nnn[j]; inp.length>j; j++){
if(iB.children[i].name == node){
iB.children[i].src = vvv[j] + ".jpg";
}
break;
}
//処理後のalert
alert("after : src = "+iB.children[i].src);
//一番最初のIMGだけが変更され、残りは変更されず。
}
}
</script>
</head>
<body>
<form action="#" onclick="imgChange(event);">
画像Ａの切替⇒
<input type="radio" name="imgA" value="3" checked />
<input type="radio" name="imgA" value="4" />
<input type="radio" name="imgA" value="5" />
<br />
画像Ｂの切替⇒
<input type="radio" name="imfB" value="6" checked />
<input type="radio" name="imfB" value="7" />
<input type="radio" name="imfB" value="8" />
<input type="radio" name="imfB" value="9" />
<input type="radio" name="imfB" value="10" />
<br />
画像Ｃの切替⇒
<input type="radio" name="imgC" value="11" checked />
<input type="radio" name="imgC" value="12" />
</form>
<p>----------------------------------</p>
<div id="imgBOX">
画像Ａは<img width="20" src="0.jpg" name="imgA" alt="画像Ａ" />
<br />
画像Ｂは<img width="20" src="1.jpg" name="imfB" alt="画像Ｂ" />
<br />
画像Ｃは<img width="20" src="2.jpg" name="imgC" alt="画像Ｃ" />
</div>
</body>
</html>
お礼
無事に解決しました。 キーに配列を使う・・・試してみます。 ありがとうございました。