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

发布于 2024-12-09 00:30:49 字数 895 浏览 1 评论 0原文

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

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

原文

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.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单气质女生网名 2024-12-16 00:30:49

这是一个帮助您入门的快速示例。您可以在此处查看其实际效果。

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

Here's a quick example to get you started. You can see it in action 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" />

回复收藏 0 原文

百善笑为先 2024-12-16 00:30:49

这就是 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/

This is how the solution looks like in 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/

回复收藏 0 原文

他是夢罘是命 2024-12-16 00:30:49

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

回复收藏 0 原文

oО清风挽发oО 2024-12-16 00:30:49

通常人们使用诸如 jQuery 之类的框架。它可以让您从本质细节和跨浏览器的痛苦中抽象出来。使用它，您可以像这样执行您描述的任务：

http://jsfiddle.net/3vQJZ/3/< /a>

这是该工作演示的代码：

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

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:

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

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

回复收藏 0 原文

~没有更多了~