title: How to hide/show part of a form when checkbox is checked/unchecked?
body: <p><strong><a href="http://www.aspsnippets.com/Articles/Show-Hide-DIV-with-TextBox-when-CheckBox-is-checked-unchecked-using-JavaScript-and-jQuery.aspx" rel="nofollow noreferrer">I found a solution right here, works perfectly!</a></strong> </p>
  
  <p>This is my first attempt of trying to hide and show a section of a form with javascript. I have 0 experience with javascript and tried <a href="https://www.youtube.com/watch?v=rbm1qXCAWjI" rel="nofollow noreferrer">this tutorial</a> and <a href="https://stackoverflow.com/questions/3104405/how-to-hide-show-content-when-checkbox-is-checked-unchecked">this basic example</a> on top of several other websites and tutorials over the last 2-3 hours, yet all fails to actually work.</p>
  
  <p>I made a form with several radio's, a few text fields and a several checkboxes. I want some of these text fields to be invisible until you check a specific checkbox that will show them. I'd like to do this to several checkboxes for several text fields.</p>
  
  <p>Example: You check the checkbox "Other" and a textfield appears to tell you to specify other in that field.</p>
  
  <p>I narrowed my code down to just a small test below, since I do not wish to share all questions and wanted a simple way to figure out how to get it to work. I put the to be hiden/shown section in a <code>div</code> because I thought that might help it, according to the "basic exmaple", but it is not necessary to be in a <code>div</code> for my form.</p>
  
  <p>Thank you in advance for your reply and apologies for my noobness :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script&gt;
  $("#yourCheckboxID").click(function ()
  {
      if ($("#boxchecked").attr("checked"))
      {
          $("#hidden").show();
      }
      else
      {
          $("#hidden").hide();
      }              
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" name="form1" method="post" action=""&gt;
    &lt;p&gt;
      &lt;label&gt;
        &lt;input type="checkbox" name="CheckboxGroup1" value="checkbox" id="box" /&gt;
        Main.&lt;/label&gt;
      &lt;br /&gt;
      &lt;label&gt;
        &lt;input type="checkbox" value="checkbox" name="CheckboxGroup1" id="boxchecked" /&gt;
        Other.&lt;/label&gt;
      &lt;br /&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  &lt;div id="hidden"&gt;Can you see this?&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>