我正在尝试创建一个页面，该页面会根据用户点击的复选框生成简单的自定义报告。在左侧，我将有一列垂直的复选框。为了简单起见，假设我有两个标记为“人口”和“就业”的复选框。
当用户有兴趣查看就业数据时，他们选中“就业”框，数据“employment.jpg”的图像文件将显示在右侧。如果他们随后取消选中该框，图像将消失。如果他们同时选中这两个框，则两张图片将以类似的方式显示，按照点击的顺序一张在另一张下方。
我对 HTML 比较熟悉，但对 Javascript 还是个新手。我一直在尝试使用 if 语句和 document.write 执行此操作，但无法在生成图像时将我的复选框保留在页面上。
这是我当前的代码:
<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 .
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}<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 - 选中复选框时使用javascript和html显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7691523/