帶有復選框的圖像顯示

Question

我希望用戶能夠通過使用復選框選擇要顯示的圖像來顯示圖像。 我曾嘗試這樣做，但是選擇后圖像似乎沒有顯示

 function testdisplay() { var image = document.getElementsByTagName("img") var src2=image[2].getAttribute("src"); var img1 = document.getElementById("check-option8"); var bg = document.getElementById("container"); if (img1.checked) { bg.src=src2 } } } 

 <div id="container"> <img id="dolphin1" class="dolphin" src="../images/dolphins/image1.png" alt="dolphin 1" title="dolphin 1"> <img id="dolphin2" class="dolphin" src="../images/dolphins/image2.png" alt="dolphin 2" title="dolphin 2"> <img id="dolphin3" class="dolphin" src="../images/dolphins/image3.png" alt="dolphin 3" title="dolphin 3"> </div> <div id="toggle-components"> <fieldset> <legend>Choose image to display</legend> <input type="checkbox" id="check-option1" checked="checked"><label for="check-dolphin1">diving down</label> <input type="checkbox" id="check-option8" onclick="if(this.checked){testdisplay()}" )><label for="check-dolphin8">jumping up</label> <input type="checkbox" id="check-option5"><label for="check-dolphin5">take off</label> <input type="checkbox" id="check-option3"><label for="check-dolphin3">jumping together</label> </fieldset> </div> 

Answer 1

我嘗試更新您的代碼，以便您可以輕松理解：

您代碼中的主要變化是：

• 制作一個數組以保留圖像源

• 進行一些更改testDisplay功能。

jsfiddle的鏈接

 var imgArray = []; imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg"); imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg"); imgArray.push("http://reviewnepal.com/socialevents/thumb/google_photo.jpg"); function testdisplay() { var src2 = imgArray[1]; var bg = document.getElementById("container"); if (document.getElementById("check-option8").checked) bg.src = src2; else bg.src = ""; } 

 <img id="container" /> <div id="toggle-components"> <fieldset> <legend>Choose image to display</legend> <input type="checkbox" id="check-option1" checked="checked"><label for="check-dolphin1">diving down</label> <input type="checkbox" id="check-option8" onclick="debugger; testdisplay();" )><label for="check-dolphin8">jumping up</label> <input type="checkbox" id="check-option5"><label for="check-dolphin5">take off</label> <input type="checkbox" id="check-option3"><label for="check-dolphin3">jumping together</label> </fieldset> </div>