How to hide/show part of a form when checkbox is checked/unchecked?
<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>