1

下面的代码显示了 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”，但该类永远不会被删除。

提前谢谢大家，Arky

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

4

4 回答 4

2

尝试这个：

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

jsFiddle 示例

于 2013-03-06T21:27:17.953 回答
1

触发事件的输入是选中的，所以不需要使用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/

于 2013-03-06T21:24:28.583 回答
1

问题

请记住，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');
 });
于 2013-03-06T21:28:15.550 回答
0

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

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

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

演示

于 2013-03-06T21:33:09.323 回答