当复选框被选中时，使用javascript和html来显示图片 [英] Using javascript and html to show images when checkboxes are checked
问题描述
我想根据用户点击的复选框创建一个可生成简单自定义报告的页面。在左侧，我将有一个垂直的复选框列。为了简单起见，假设我有两个复选框标记为人口和就业。
I'm trying to create a page that generates simple custom reports based on the checkboxes a user clicks. On the left side I will have a vertical column of checkboxes. For simplicity's sake, lets say I have two checkboxes labeled "Population" and "Employment".
当用户有兴趣查看就业数据时，他们检查就业框，并且数据employment.jpg的图像文件将显示在右侧。如果他们然后取消选中该框，图像将消失。如果他们检查两个框，两个图像将被类似地显示，一个在下面的顺序点击。
When a user is interested in seeing employment data they check the "Employment" box and the image file of the data "employment.jpg" will be displayed to the right. If they then uncheck the box, the image will disappear. If they check both boxes, both images will be similarly displayed, one below the other in the order clicked.
我很熟悉HTML和新的Javascript 。我一直在试图用 if 语句和 document.write 这样做，但不能保持我的复选框上
I'm am loosely familiar with HTML, and new to Javascript. I've been trying to do this with if statements and document.write but can't keep my checkboxes on the page when the image is generated.
以下是我目前的程式码：
Here's my current code:
<html>
<head>
<script language="javascript" type="text/javascript">
function checker(that) {
if (that.checked) {
document.write("<br /><br /><img src='employment.png'>");
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="Box" onclick="checker(this)"> Employment <br />
</form>
</body>
</html>
推荐答案
这里有一个快速入门的例子。您可以在这里查看。
Here's a quick example to get you started. You can see it in action here.
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
<img id="imgpopulation" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden" />
这篇关于当复选框被选中时，使用javascript和html来显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
