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，则始终为checked。

请改用：

$('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。

小提琴：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/

Answer 2

当您点击单选按钮时，没有click事件被发送到刚刚成为未选中的事件。

您需要找到同一组中的其他单选按钮，然后从中删除active类。

如果每个组中的所有单选按钮共享一个sihgle父级（即表格行），这将是最简单的，例如：

$(this).closest('td').siblings().find('.active').removeClass('active');

jQuery - 在类标签中添加/删除类的单选按钮

2 个答案: