admin 管理员组

文章数量: 1086019

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>

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>
  • javascript
  • image
  • checkbox
Share Improve this question edited Oct 7, 2011 at 18:57 Ry-♦ 225k56 gold badges492 silver badges499 bronze badges asked Oct 7, 2011 at 18:42 Laban LabanLaban Laban 331 gold badge1 silver badge3 bronze badges 3
  • Can you include the code you have so far in your question? – JohnFx Commented Oct 7, 2011 at 18:44
  • Yeah, sorry. I was reluctant to include the code, as it is a mismatch of pieces I grabbed from other similar solutions online. – Laban Laban Commented Oct 7, 2011 at 18:50
  • The document.write approach is not a great idea because it will add another image every time the checkbox is toggled. It is better to include a hidden image from the get-go and just toggle the visibility. – JohnFx Commented Oct 7, 2011 at 19:02
Add a ment  | 

4 Answers 4

Reset to default 2

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./avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG"  style="visibility:hidden"/>
<img id="imgpopulation" src="http://www.gravatar./avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG"  style="visibility:hidden" />

This is how the solution looks like in AngularJS:

<script src="http://docs-next.angularjs/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../cnwk.1d/i/bto/20071106/OLPC_photo_540x360.jpg" 
  ng:show="production" />
<img src="http://www.sunriseenterprisesinc./main/Portals/0/EmploymentSmall.jpg" 
  ng:show="employment" />

You can play with the example here: http://jsfiddle/psyho/nrdnx/

You can handle the change event of the checkboxes. Here's a full example (without images, though): http://jsfiddle/minitech/hsF9s/

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/3vQJZ/3/

And here's the code from that working demo:

<input type="radio" name="selectPicture" value="http://i170.photobucket./albums/u277/AmandaisAwesomeQUACK/monkey.gif"/>
<input type="radio" name="selectPicture" value="http://freesmileyface/smiley/animals/monkey-crush2.gif" checked/>
<img id="image" src="http://freesmileyface/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());
    });
});

本文标签： Using javascript and html to show images when checkboxes are checkedStack Overflow

版权声明：本文标题：Using javascript and html to show images when checkboxes are checked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744053855a2525505.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。