选中复选框时使用 javascript 和 html 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7691523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using javascript and html to show images when checkboxes are checked
提问by Laban Laban
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".
我正在尝试创建一个页面，根据用户单击的复选框生成简单的自定义报告。在左侧，我将有一个垂直的复选框列。为简单起见，假设我有两个标记为“人口”和“就业”的复选框。
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.
当用户有兴趣查看就业数据时，他们选中“就业”框，数据的图像文件“employment.jpg”将显示在右侧。如果他们随后取消选中该框，图像将消失。如果他们选中这两个框，则两个图像将以类似的方式显示，按照单击的顺序一个在另一个下方。
I'm am loosely familiar with HTML, and new to Javascript. I've been trying to do this with ifstatements and document.writebut can't keep my checkboxes on the page when the image is generated.
我对 HTML 不太熟悉，对 Javascript 不熟悉。我一直在尝试使用if语句来执行此操作，document.write但是在生成图像时无法将复选框保留在页面上。
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>
采纳答案by JohnFx
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" />
回答by psyho
This is how the solution looks like in AngularJS:
这就是解决方案在AngularJS 中的样子：
<script src="http://docs-next.angularjs.org/angular-0.10.1.min.js"
ng:autobind></script>
<p>
<input type="checkbox" name="production" id="production" />
<label for="production">Production</label>
</p>
<p>
<input type="checkbox" name="employment" id="employment" />
<label for="employment">Employment</label>
</p>
<img src="http://i.i.com.com/cnwk.1d/i/bto/20071106/OLPC_photo_540x360.jpg"
ng:show="production" />
<img src="http://www.sunriseenterprisesinc.com/main/Portals/0/EmploymentSmall.jpg"
ng:show="employment" />
You can play with the example here: http://jsfiddle.net/psyho/nrdnx/
你可以在这里玩这个例子：http: //jsfiddle.net/psyho/nrdnx/
回答by Milimetric
Usually people use a framework such as jQuery. It allows you to abstract away from the nitty gritty details and cross-browser pains. Using that, you would do the task you describe like this:
通常人们使用诸如 jQuery 之类的框架。它使您可以从细节和跨浏览器的痛苦中抽象出来。使用它，您可以像这样完成您描述的任务：
And here's the code from that working demo:
这是该工作演示中的代码：
<input type="radio" name="selectPicture" value="http://i170.photobucket.com/albums/u277/AmandaisAwesomeQUACK/monkey.gif"/>
<input type="radio" name="selectPicture" value="http://freesmileyface.net/smiley/animals/monkey-crush2.gif" checked/>
<img id="image" src="http://freesmileyface.net/smiley/animals/monkey-crush2.gif" alt="image selected by radio buttons"/>
$(document).ready(function(){
$('input[name=selectPicture]').click(function(){
$('#image').attr('src', $('input[name=selectPicture]:checked').val());
});
});
回答by Ry-
You can handle the changeevent of the checkboxes. Here's a full example (without images, though): http://jsfiddle.net/minitech/hsF9s/
您可以处理change复选框的事件。这是一个完整的例子（虽然没有图像）：http: //jsfiddle.net/minitech/hsF9s/
