Question

我希望用户能够通过使用复选框选择要显示的图像来显示图像。我已经尝试过这样做，但是在选择

时图像似乎没有显示

sudo pip uninstall Scrapy
sudo pip3 install Scrapy

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

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>

带有复选框的图像显示

1 个答案: