title: How to make checkbox show/hide SVG-Content
body: <p>i have rectangles and lines in SVG together with a checkbox. I want somehow to make a checked checkbox to show the content and when its checked, otherwise not. So for example: When the checkbox for "areas" are checked the "area rectangles" will be shown and the same for the "river-lines".</p>
  
  <p>It does not seem very hard but I'm totally new to JavaScript and cant find a way to make it work.</p>
  
  <p>The script is to be in HTML and be able to be shown on a web browser. Everything is visible but i cant get the check boxes to work.</p>
  
  <p>I have tried to build functions with "onClick" and to change the color to "none".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Web Mapping using SVG&lt;/title&gt;
    &lt;script&gt;
    &lt;/script&gt;
    &lt;style&gt;
   &lt;/style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
    &lt;form&gt;
     &lt;fieldset style="width:600px; height:600px"&gt;
      &lt;legend&gt;Layers&lt;/legend&gt;
  
  
      &lt;input type="checkbox" id="areaCbx" /&gt;&lt;strong                                                    id="areaTXT"&gt;Area&lt;/strong&gt;&lt;br&gt;
      &lt;input type="checkbox" id="riverCbx"  /&gt;&lt;strong id="riverTXT"&gt;River&lt;/strong&gt;&lt;br&gt;
      &lt;hr /&gt;
      
      
      &lt;svg width="100%" height="100%"&gt;
      
   &lt;g id="AreaSVG" &gt;
        &lt;rect x="0" y="0" width="100" height="200"   /&gt;
        &lt;rect x="120" y="0" width="100" height="200"   /&gt;
        &lt;rect x="280" y="0" width="100" height="200"  /&gt;
        &lt;rect x="400" y="0" width="100" height="200"   /&gt;
        &lt;rect x="0" y="260" width="100" height="200"  /&gt;
        &lt;rect x="120" y="260" width="100" height="200"  /&gt;
        &lt;rect x="240" y="260" width="100" height="200"  /&gt;
        &lt;rect x="360" y="260" width="100" height="200"  /&gt;
      &lt;/g&gt;
      &lt;g id="RiverSVG"&gt;
        
                      &lt;line x1="0" y1="230" x2="500" y2="230"   style="stroke:blue;stroke-width:6"/&gt;
                      &lt;line x1="250" y1="230" x2="250" y2="0" style="stroke:blue;stroke-width:6"/&gt;
                      &lt;line x1="0" y1="500" x2="500" y2="500" style="stroke:blue;stroke-width:6"/&gt;
        
     &lt;/g&gt;
        &lt;/svg&gt;
     &lt;/fieldset&gt;
    &lt;/form&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>