jQuery - 向其标签添加/删除类的单选按钮

Question

我知道这对很多人来说可能听起来太容易了，但我自己无法解决这个问题，我不明白我错过了什么。

我有一组成对分组的单选按钮。每对对应一个选择加入/选择退出部分。

我需要的是切换一个类 .active关于<label> .

这是我的基本 HTML:

<td class="btn opt-in">
  <label>
    <input type="radio" name="radio1" value="radio1">
  </label>
</td>
<td class="btn opt-out">
   <label>
     <input type="radio" name="radio1" value="radio2">
   </label>
</td>

这是我的 JavaScript(它部分工作):

$('input:radio').click(function() {
    if ($(this).is(':checked')) {
        $(this).parent().addClass('active');
    } else {
        $(this).parent().removeClass('active');
    };
});

使用上面的脚本，我可以将类添加到标签中，但不能删除/切换它。

这是一个 Fiddle 供引用。

非常感谢任何帮助。

Answer 1

如果您点击特定的input:radio，则始终选中。

改用这个:

$('input:radio').click(function() {
  $('input:radio[name='+$(this).attr('name')+']').parent().removeClass('active');
        $(this).parent().addClass('active');
});​

$('input:radio[name='+$(this).attr('name')+']') 选择与单击的名称相同的所有单选元素。了解 jquery selectors .

fiddle :http://jsfiddle.net/NNkeQ/7/

或者只是:

$('input:radio').click(function() {
    $('label:has(input:radio:checked)').addClass('active');
    $('label:has(input:radio:not(:checked))').removeClass('active');
});​

http://jsfiddle.net/NNkeQ/18/