javascript - jQuery 添加类到未删除的单选框

Question

我使用 jQuery 将一个类添加到一个单选框(如果它被选中)。这工作正常，但它不会在选择另一个单选框时删除类。

我错过了什么？

jQuery(".checkbox-radio").change(function() {
    if ($(this).is(':checked'))
        $(this).closest(".radio-inline").addClass("selected");
    else
        $(this).closest(".radio-inline").removeClass("selected");
});

<label class="radio-inline conf-option-1">
    <input type="radio" class="checkbox-radio" name="configoption[1]" value="1" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

<label class="radio-inline conf-option-2">
    <input type="radio" class="checkbox-radio" name="configoption[2]" value="2" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

<label class="radio-inline conf-option-3">
    <input type="radio" class="checkbox-radio" name="configoption[3]" value="3" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

Answer 1

从所有 .radio-inline 中删除 selected 类，然后根据条件添加/删除 selected ，如下所示。

<script>
jQuery(".checkbox-radio").change(function() {
  $(".radio-inline").removeClass("selected"); //add this
  if ($(this).is(':checked')){
    $(this).closest(".radio-inline").addClass("selected");
  }
  else
    $(this).closest(".radio-inline").removeClass("selected");
});
</script>

DEMO