title: jquery toggle div based on radio button selection
body: <p>I have a radio button group on a survey form whose html looks like:</p>
  
  <pre><code>&lt;label&gt;Would you like to compete?&lt;/label&gt;
        &lt;input type="radio"  name="compete" value="2" id="competenoradio" &gt;
        &lt;label for="compete_no"&gt;No&lt;/label&gt;
        &lt;input type="radio" name="compete" value="1" id="competeyesradio"&gt;
        &lt;label for="compete_yes"&gt;Yes&lt;/label&gt;
        &lt;div id="competeyes"&gt;
          &lt;label class="competeyestxt" hidden=true&gt;Which Location?&lt;/label&gt;
          &lt;textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true"&gt;
          &lt;/textarea&gt;
        &lt;/div&gt;
  
  The div at the bottom with id 'competeyes' need to be toggled between invisible to visible
   based on whether the user selected radio button with id 'compete_yes'.
  </code></pre>
  
  <p>Here is my attempt at it, which does not work.</p>
  
  <pre><code>Attempt 1:
  $('#competeyesradio').bind('change',function(){
    $('#competeyes').toggle($(this).is(':checked'));
  });
  
  
  Attempt 2:
  
  $('div.input input:radio').bind('change',function(){
     $('#competeyes').toggle($(this).is(':checked'));
  });
  
  Attempt 3:
  
  $('[name=compete]').bind('change',function(){
    $('#competeyes').toggle($(this).is(':checked'));
   });
  </code></pre>
  
  <p>Any suggestions?</p>