title: Using javascript and html to show images when checkboxes are checked
body: <p>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".  </p>
  
  <p>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.</p>
  
  <p>I'm am loosely familiar with HTML, and new to Javascript.  I've been trying to do this with <code>if</code> statements and <code>document.write</code> but can't keep my checkboxes on the page when the image is generated.</p>
  
  <p>Here's my current code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script language="javascript" type="text/javascript"&gt;
          function checker(that) {
              if (that.checked) {
                  document.write("&lt;br /&gt;&lt;br /&gt;&lt;img src='employment.png'&gt;");
              }
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;input type="checkbox" name="Box" onclick="checker(this)"&gt; Employment &lt;br /&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>