title: Jquery checkbox to hide or display an element
body: <p>I want to use jquery to always hide an element when it is checked, and show the element when it is unchecked. After doing some research I found the "is" attribute and so I created a simple html file as:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  if($("#s").is(':checked'))
      $("#test").hide();  // checked
  else
      $("#test").show();
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;This is a heading&lt;/h2&gt;
  
  &lt;p id="test"&gt;This is a paragraph.&lt;/p&gt;
  &lt;p id="test"&gt;This is another paragraph.&lt;/p&gt;
  
  &lt;input type="checkbox" id="s"&gt;Click me&lt;/input&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now for some reason, the jquery is not functional. Any help would be appreciated please. I also tried:</p>
  
  <pre><code>if(document.getElementById('isAgeSelected').checked) {
      $("#txtAge").show();
  } else {
      $("#txtAge").hide();
  }
  </code></pre>
  
  <p>And this doesn't work either.</p>