title: Radio buttons + checkbox combinations
body: <p>The aim is that I have a pair of radio buttons and each pair of radio buttons is inserted in a div with a blog post. I.E. each post can be liked(on)/disliked(off). The checkmark then serves as a universal switch to how all liked/disliked posts. The code below is merely a prototype but I do want to add a second checkbox, enabling users to hide all liked, hide all disliked, hide both (to see which ones haven't been decided on) or none.</p>
  
  <p>In the code below, I cannot get the check box to work independently of the radio buttons. As it is, checking the box switches the radio button to On. I want the radio button to remain where the user wants it and when checking the box, only IF radio is On does the hidden message show. If the radio is Off, checking the box should result in nothing. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Unhide on checkboxes/radio buttons&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function toggleLayer(val)
  {
      if(val == 'on' || val === true)
      {
          document.getElementById('a1').checked = true;
          document.getElementById('layer1').style.display = 'block';
      }
      else if(val == 'off' || val === false)
      {
          document.getElementById('a2').checked = true;
          document.getElementById('layer1').style.display = 'none';
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="" method="post"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Unhide Layer Form&lt;/legend&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;label for="a1"&gt;On&lt;/label&gt; &lt;input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /&gt; &lt;label for="a2"&gt;Off&lt;/label&gt; &lt;input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;label for="b1"&gt;Check Me:&lt;/label&gt; &lt;input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;div id="layer1"&gt;You can now see this.&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, can someone help me modify this code to:  </p>
  
  <ol>
  <li>add a second checkbox  </li>
  <li>Have the first checkbox hide all divs where radio is On  </li>
  <li>Have the second checkbox hide all divs where radio is Off  </li>
  <li>Have the radio selections remember where they were so when the user returns, his settings are recalled.</li>
  </ol>