Using javascript and html to show images when checkboxes are checked

问题

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>

回答1:

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

回答2:

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/

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/7691523/using-javascript-and-html-to-show-images-when-checkboxes-are-checked

标签

javascript

image

checkbox