基於無線標籤的onClick函數

我有幾個單選按鈕及其相應的標籤。我想創建一個javascript代碼，以便如果某個人點擊某個標籤，它將更改一個ID爲「largeimage」的特定圖像。基於無線標籤的onClick函數

所以，通過點擊這些標籤/單選按鈕：

<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」成一體以下圖像取決於當前選擇哪個標籤選項/單選按鈕：

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

我試過了mult iple onClick功能無濟於事。建議？

來源

2012-08-15 cdoweb

您試圖通過 '這個' 作爲的 'onClick' 參數？ onClick不會被觸發嗎？因爲這段代碼沒有做任何事情。 – ATaylor 2012-08-15 19:46:47

試試這個

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-15 19:48:39

基於無線標籤的onClick函數

回答

相關問題