Javascript 选中单选按钮“更改样式”

我有一套单选按钮

<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(){
   $("input.RadioButton").removeClass('chosen');
   $(this).addClass('chosen');
})

---

通过这种方式，您可以从所有收音机中删除“Selected”类，然后仅在单击的收音机上分配该类。

首先，您不需要将“RadioButton”作为一个类，因为您可以通过如下属性选择它们

$("input[type=radio]")

第二，在将所选类应用于

此

之前，应该删除该类

$("input[type=radio]").click(function() {
  // Remove the class from all inputs that have it
  $("input[type=radio].chosen").removeClass("chosen");

  // Add it to current
  $(this).addClass("chosen");
});

---

css3是一个选项吗？如果是这样的话，你可以完全用CSS来做。谢谢！我知道这就是问题所在，只是不知道怎么解决。

$("input[type=radio]").click(function() {
  // Remove the class from all inputs that have it
  $("input[type=radio].chosen").removeClass("chosen");

  // Add it to current
  $(this).addClass("chosen");
});