title: jQuery - radio buttons that add/remove a class to their labels
body: <p>I know this may sound too easy for many but I just can't figure this one out on my own, I don't get what I'm missing.</p>
  
  <p>I have a set of radio buttons grouped in pairs. Each pair corresponds to an opt-in / opt-out section.</p>
  
  <p>What I need is to toggle a class <code>.active</code> on the <code>&lt;label&gt;</code>.</p>
  
  <p><strong>Here's my basic HTML:</strong></p>
  
  <pre><code>&lt;td class="btn opt-in"&gt;
    &lt;label&gt;
      &lt;input type="radio" name="radio1" value="radio1"&gt;
    &lt;/label&gt;
  &lt;/td&gt;
  &lt;td class="btn opt-out"&gt;
     &lt;label&gt;
       &lt;input type="radio" name="radio1" value="radio2"&gt;
     &lt;/label&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Here's my JavaScript</strong> (it works partially):</p>
  
  <pre><code>$('input:radio').click(function() {
      if ($(this).is(':checked')) {
          $(this).parent().addClass('active');
      } else {
          $(this).parent().removeClass('active');
      };
  });
  </code></pre>
  
  <p>With the above script I'm able to add the class to the label just fine, but not remove/toggle it.</p>
  
  <p>Here's a <strong><a href="http://jsfiddle.net/rzea/NNkeQ/2/" rel="nofollow">Fiddle</a></strong> for reference.</p>
  
  <p>Any help is greatly appreciated.</p>