javascript - 基于 Radio Labels 的 onClick 函数

Question

我有几个带有相应标签的单选按钮。我想创建一个 javascript 代码，这样如果一个人点击某个标签，它将更改一个 ID 为“largeimage”的特定图像。

因此，通过单击这些标签/单选按钮：

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

将导致此图像具有“大图像”的 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 功能无济于事。建议？

Answer 1

尝试这个

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;
        }
    }
}