0

対応するラベルが付いたラジオボタンがいくつかあります。特定のラベルをクリックすると、「largeimage」という ID を持つ特定の画像が変更されるように、JavaScript コードを作成したいと考えています。

したがって、これらのラベル/ラジオ ボタンをクリックすると、次のようになります。

<input type="radio" name="thumbnails" value="thumbnail_ver1" id="thumbnail_ver1">
<label for="thumbnail_ver1">Color option 1.</label>

<input type="radio" name="thumbnails" value="thumbnail_ver2" id="thumbnail_ver2">
<label for="thumbnail_ver2">Color option 2.</label>

<input type="radio" name="thumbnails" value="thumbnail_ver3" id="thumbnail_ver3">
<label for="thumbnail_ver3">Color option 3.</label>

<input type="radio" name="thumbnails" value="thumbnail_ver4" id="thumbnail_ver4">
<label for="thumbnail_ver4">Color option 4.</label>

<input type="radio" name="thumbnails" value="thumbnail_ver5" id="thumbnail_ver5">
<label for="thumbnail_ver5">Color option 5.</label>

「largeimage」の ID を持つこのイメージが発生します。

<img src="largeimage_original.jpg" id="largeimage" width="230px" height="330px" alt="Large Image" />

現在選択されているラベルオプション/ラジオボタンに応じて、「ラージイメージ」を次のイメージのいずれかに変更するには:

largeimage_ver1.jpg
largeimage_ver2.jpg
largeimage_ver3.jpg
largeimage_ver4.jpg
largeimage_ver5.jpg

複数の onClick 関数を試してみましたが、役に立ちませんでした。提案？

4

1 に答える 1

0

これを試して

var radios = document.forms["yourFormName"].elements["thumbnails"];

for (var i = 0, max = radios.length; i < max; i++) {
    radios[i].addEventListener("click", replaceImage, false); 
}

function replaceImage() {
    for (var i = 0, max = radios.length; i < max; i++) {
        if (radios[i].checked) {
            imgID = (radios[i].value).replace("thumbnail_", "");
            document.getElementById("largeimage").src = "largeimage_" + imgID + ".jpg";
            return;
        }
    }
}
于 2012-08-15T19:48:39.590 に答える