javascript - 选中时单选按钮更改样式

Question

我有一组单选按钮。

<ul class="ProductOptionList">
<li>
<label>
<input class="RadioButton" type="radio" value="157" name="variation[1]"/>
Lemon (200 ml)
</label>
</li>
<li>
<label>
<input class="RadioButton chosen" type="radio" value="160" name="variation[1]"/>
Lemon and Herbs (200 ml)
</label>
</li>
</ul>

我想突出显示选中的那个。

我使用了这段代码:

$('input.RadioButton').click(function() {
    var chkbox = $(this);
      chkbox.is(':checked') ?
        chkbox.addClass('chosen') : $chkbox.removeClass('chosen');

但是如果一个人点击一个变体，它会起作用并应用类，然后如果他们点击第二个，它会将类应用到第二个，但不会从第一个中删除类。我如何删除类(class)？ 谢谢!

Answer 1

因为您只在点击的单选机上激活该功能。试试这个:

$("input.RadioButton").click(function(){
   $("input.RadioButton").removeClass('chosen');
   $(this).addClass('chosen');
})

通过这种方式，您可以从所有 radio 中删除“选择的”类，然后仅将类分配给单击的 radio 。