Using javascript and html to show images when checkboxes are checked

Question

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>

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, Oct 07 '11 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, Oct 07 '11 at 19:02

score 2 · Accepted Answer · edited Mar 29 '21 at 10:02

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

Thanks JohnFx, this looks like the best of the solutions so far for my needs. It is simple and easy to add additional checkboxes. — Laban Laban, Oct 07 '11 at 19:38

score 1 · Answer 2 · answered Oct 07 '11 at 18:54

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/

score 0 · Answer 3 · answered Oct 07 '11 at 18:54

0

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

answered Oct 07 '11 at 18:54

Ry-

199,309
51
404
420

score 0 · Answer 4 · answered Oct 07 '11 at 18:58

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

This would toggle the picture in a single image element. The OP was looking for two images that could be toggled independently. — JohnFx, Oct 07 '11 at 19:09
I agree, I fail to see a big difference between the two, but ok. — Milimetric, Oct 07 '11 at 19:44

Using javascript and html to show images when checkboxes are checked

4 Answers4

Linked