jQuery - radio buttons that add/remove a class to their labels
<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>
