如何根据使用 jQuery 的输入单选选择向父 div 添加/删除类？答案

【问题标题】：How to add/remove class to parent div according to input radio selection using jQuery?如何根据使用 jQuery 的输入单选选择向父 div 添加/删除类？
【发布时间】：2013-02-21 21:23:19
【问题描述】：

下面的代码显示了 4 个默认隐藏的单选按钮，使用 CSS 中的 display:none 属性。但是，我使用“标签”标签选择它们。我也有一个包裹一切的 div。

我想知道如果选中了包含的单选框，我如何向这个“div”标签添加/删除一个类。

所以如果我选择了一个收音机，父 div 会得到一个类，如果选择了另一个收音机，则该类会从这个 div 中删除并添加到所选收音机的父 div 中。

<div class="plan">
   <h3 class="division-one">Division One<span>€2</span></h3>
   <div><label for="23">1 month</label><input type="radio" name="membershipPlanSID" value="23" id="23" /></div>
   <div><label for="24">3 months</label><input type="radio" name="membershipPlanSID" value="24" id="24" /></div>
   <div><label for="25">6 months</label><input type="radio" name="membershipPlanSID" value="25" id="25" /></div>
   <div><label for="26">12 months</label><input type="radio" name="membershipPlanSID" value="26" id="26" /></div>
   <input type="hidden" name="returnBackUri" value="{$returnBackUri}" />
   <input class="signup" type="submit" value="[[Sign Up:raw]]" />
</div>

我尝试了类似的方法，但没有成功：

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

这样做，尽管有“else”，但该类永远不会被删除。

提前谢谢大家，方舟

编辑：非常感谢大家的快速解答！这里很棒的社区:)

【问题讨论】：

我最近也在玩类似的概念：jsfiddle.net/ZK4th/1
这正是我想要达到的目标。问题是我编程很烂:)

标签： jquery css input radio

【解决方案1】：

试试这个：

$('input:radio').click(function () {
    $('div.plan div').removeClass('label-selected');
    $(this).parent().addClass('label-selected');
});

jsFiddle example

【讨论】：

【解决方案2】：

问题

请记住，radio 输入元素只有在单击其对应元素之一时才会“取消选中”。与checkbox 输入元素不同，第二次单击radio 输入不会清除其值。

在您的示例中，在第一次单击时，您成功地将类添加到父 div，因为 radio 输入确实是 :checked，但在第二次单击时，相同 radio 输入，该元素仍然是 :checked，因此不会删除父类。

解决方案

点击radio 输入元素，从所有div 元素中删除该类除了直接父元素。

例如：

 $('.plan :radio').on('click', function() {
     var parent_div = $(this).parent().addClass('label-selected');
     $('.plan').find('div').not(parent_div).removeClass('label-selected');
 });

【讨论】：

非常感谢。它与所有其他解决方案一样完美。但是由于彻底的解释，这个得到了蛋糕。再次感谢。
没问题。很高兴我能帮忙:)
程序更改失败：$('.plan :radio:checked').prop('checked',false);
@MarkSchultheiss 真的。这也会使 DOM 中的更改失败，例如 $(':radio').wrap('span')。对于最通用的方法，请参阅未定义的答案。

【解决方案3】：

触发事件的输入是选中的，所以不需要使用if语句。将类添加到父 div 元素并将其从 div 兄弟元素中删除。

$(function(){
    $('.plan input[type=radio]').change(function() {
       $(this).closest('div')
              .addClass('label-selected')
              .siblings('div')
              .removeClass('label-selected');              
    });
});

http://jsfiddle.net/GXdyP/

【讨论】：

【解决方案4】：

如果这是复选框，它会起作用，但由于它只影响刚刚单击的那个，它不会从其他框中删除该类。试试这个：

$('input[type=radio]').click(function() {
        $('div.plan div').removeClass('label-selected');
        $(this).parent().addClass('label-selected');
});

这将从所有其他元素中删除该类，然后再将其添加到您想要的元素中。

DEMO

【讨论】：