选中复选框时使用 javascript 和 html 显示图像答案

【问题标题】：Using javascript and html to show images when checkboxes are checked选中复选框时使用 javascript 和 html 显示图像
【发布时间】：2011-10-07 18:42:10
【问题描述】：

我正在尝试创建一个页面，该页面根据用户单击的复选框生成简单的自定义报告。在左侧，我将有一列垂直的复选框。为简单起见，假设我有两个标记为“人口”和“就业”的复选框。

当用户有兴趣查看就业数据时，他们会选中“就业”框，数据“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>

【问题讨论】：

您能否在问题中包含到目前为止的代码？
是的，对不起。我不愿意包含代码，因为它与我从其他类似的在线解决方案中获取的部分不匹配。
document.write 方法不是一个好主意，因为它会在每次切换复选框时添加另一个图像。最好从一开始就包含一个隐藏的图像，然后切换可见性。

标签： javascript image checkbox

【解决方案1】：

下面是一个快速示例，可帮助您入门。你可以在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" />

【讨论】：

感谢 JohnFx，这看起来是迄今为止满足我需求的最佳解决方案。添加额外的复选框很简单。

【解决方案2】：

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" />

你可以在这里玩这个例子：http://jsfiddle.net/psyho/nrdnx/

【讨论】：

【解决方案3】：

您可以处理复选框的change 事件。这是一个完整的例子（虽然没有图片）：http://jsfiddle.net/minitech/hsF9s/

【讨论】：

【解决方案4】：

通常人们使用 jQuery 之类的框架。它使您可以从琐碎的细节和跨浏览器的痛苦中抽象出来。使用它，您将完成您描述的任务：

http://jsfiddle.net/3vQJZ/3/

这是该工作演示的代码：

<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());
    });
});

【讨论】：

这将在单个图像元素中切换图片。 OP 正在寻找两个可以独立切换的图像。
我同意，我看不出两者之间有很大的区别，但是没关系。