title: Radio button opens textbox when checked, but won't close it when unchecked
body: <p>I'm trying to create a dynamic form whereby users can select to either upload and image or embed a youtube clip.</p>
  
  <p>I have tried this using radio inputs:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(".youtube").change(function () {
      //check if radio button is checked.
      if (this.checked &amp;&amp; this.value === "youtube") {
          //show a text box 'embedbode' when radio 'youtube' is checked
          $("#embedcode").show();
      } else if (!this.checked &amp;&amp; this.value === "image"){
          //hide the text box when 'image' is checked
          $("#embedcode").hide();
      }
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is the html:</p>
  
  <pre><code>&lt;input type="radio" value="image" id="type" name="type" checked='checked' autocomplete="off" /&gt;
  &lt;label&gt;Image&lt;/label&gt;
  &lt;input type="radio" value="youtube" id="type" name="type" class="youtube" /&gt;
  &lt;label&gt;Video&lt;/label&gt;
  &lt;input id="embedcode" placeholder="embed code" name="embedcode" type="text"/&gt;
  </code></pre>
  
  <p>The radio button <code>image</code> is selected by default. When a I click on the video radio button a textbox opens whereby I can input an embed code for the video.
  However, when I click back to <code>image</code>, should I change my mind on what I want to upload, the embed textbox is still there.
  I've looked at the JS and can't see where I'm going wrong.
  I tried adjusting the terms and adding an extra <code>else if</code> but the textbox won't hide when I click back to image.
  Where am I going wrong?</p>