title: Show/hide check boxes on checking a check box
body: <p>I have a rails form. I have 4 check boxes. What I am trying to do is, hide 3 of the check boxes on page load. And when the 4th check box is checked show the hidden ones. And when the check box is unchecked, again hide the 3 check boxes.</p>
  
  <p>This is what I have so far;</p>
  
  <p>The HTML code generated from the rails form:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;label for="Question 1"&gt;Question 1?&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input default="false" id="question1" name="question1" onclick="showOptions()" type="checkbox" value="1"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;input id="option1" name="option1" type="checkbox" value="idoption1"/&gt;
        &lt;label for="Option 1"&gt;Option 1&lt;/label&gt;
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;input id="option2" name="option2" type="checkbox" value="idoption2"/&gt;
        &lt;label for="Option 2"&gt;Option 2&lt;/label&gt;
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;input id="option3" name="option3" type="checkbox" value="idoption3"/&gt;
        &lt;label for="Option 3"&gt;Option 3&lt;/label&gt;
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the javascript</p>
  
  <pre><code>&lt;script type = "text/javascript" &gt;
  
  $(document).load(function() {
      $('#option1').hide()
      $('#option2').hide()
      $('#option3').hide()
  });
  
  function showOptions() {
      if $('#question1').checked() {
          $('#option1').show()
          $('#option2').show()
          $('#option3').show()
      }
  }
  
  &lt; /script&gt;
  </code></pre>
  
  <p>This doesn't work. What is wrong? Thanks</p>