2

我知道这对许多人来说可能听起来太容易了，但我无法自己解决这个问题，我不明白我所缺少的。

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

我需要的是.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');
    };
});

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

这是一个小提琴供参考。

任何帮助是极大的赞赏。

4

2 回答 2

13

如果你点击具体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 选择器的信息。

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

于 2012-07-20T21:58:23.690 回答
0

当您单击一个单选按钮时，不会将任何click事件发送到刚刚变为未选中的那个。

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

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

$(this).closest('td').siblings().find('.active').removeClass('active');
于 2012-07-20T21:58:52.177 回答