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

刪除selected從所有類.radio-inline ，然后添加/刪除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

Answer 2

The name attribute should  be the same for all your check-boxes
See here:

的jsfiddle

Answer 3

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

Answer 4

像這樣使用

$(".radio-inline").click(function() {

    $(".radio-inline").find("input").removeClass("selected");

    if ($(this).find("input").is(':checked')){      
        $(this).find("input").addClass("selected");
    }

});