Jquery未能改变Div边框颜色

Question

点击其中一个单选按钮时，我正在尝试实现“更改Div边框颜色”。它适用于方案1，但不适用于方案2.

$(":radio:checked").closest(".discount").addClass("checked");
$(":radio").on("change", e => {
  const $div = $(e.target).closest(".discount");
  console.log($div);
  $(".discount").removeClass("checked");
  $div.addClass("checked");
});

$(":radio:checked").closest(".discount2").addClass("checked");
$(":radio").on("change", e => {
  const $div = $(e.target).closest(".discount2");
  console.log($div);
  $(".discount2").removeClass("checked");
  $div.addClass("checked");
});

.discount {
  border: 2px solid #cccccc;
  padding: 2px;
  padding: 10px;
  width: 100%;
  text-align: center;
  border-radius: 5px;
}
.discount.checked {
  border-color: red;
}
.discount2 {
  border: 2px solid #cccccc;
  padding: 2px;
  padding: 10px;
  width: 100%;
  text-align: center;
  border-radius: 5px;
}
.discount2.checked {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label style="width:100%">
  <div class="discount">
    <input type="radio" name="fruits" checked>Apple</div>
</label>
<label style="width:100%">
  <div class="discount">
    <input type="radio" name="fruits">Banana</div>
</label>

<label style="width:100%">
  <div class="discount2">
    <input type="radio" name="drinks" checked>Milk</div>
</label>
<label style="width:100%">
  <div class="discount2">
    <input type="radio" name="drinks">Zzz</div>
</label>
<label style="width:100%">
  <div class="discount2">
    <input type="radio" name="drinks">Bbb</div>
</label>

在方案2中，点击“Zzz”时，Div边框“红色”消失了！任何人都知道什么是错的？

Answer 1

没有必要使用多个clases等：

（我添加了另一个版本的示例，其中没有使用<div>（并且稍微改变了颜色）

＆＃13;

＆＃13;

$('input[type=radio]:checked').parent().addClass('checked');
$('input[type=radio]').on('change',function(e) {
  var thisGroup = $(this).attr('name');
  if ($(this).is(':checked')) {
    $('input[name='+thisGroup+']').parent().removeClass('checked');
    $(this).parent().addClass('checked');
    }
 });

＆＃13;

.discount, .discount-label{
    border: 2px solid #cccccc;
    padding:2px;
    padding:10px;
    width:10%;
    text-align:center;
    border-radius: 5px;
}

.discount.checked,.discount-label.checked {
    border-color: red;
}
.discount-label input[type=radio] {
  display: none;
  }
.discount-label.checked {
  background: red;
  color: #FFF;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><div class="discount"><input type="radio" name="fruits" checked>Apple</div></label>
<label><div class="discount"><input type="radio" name="fruits">Banana</div></label>

<label><div class="discount"><input type="radio" name="drinks" checked>Milk</div></label>
<label><div class="discount"><input type="radio" name="drinks">Zzz</div></label>
<label><div class="discount"><input type="radio" name="drinks">Bbb</div></label>

<h2>example two</h2>
<label class="discount-label"><input type="radio" name="fruits2" checked>Apple</label>
<label class="discount-label"><input type="radio" name="fruits2">Banana</label>

<label class="discount-label"><input type="radio" name="drinks2" checked>Milk</label>
<label class="discount-label"><input type="radio" name="drinks2">Zzz</label>
<label class="discount-label"><input type="radio" name="drinks2">Bbb</label>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是两个$(":radio").on("change")都被触发，并且两个.checked类都被删除了，但它只添加了当前更改的复选框。您可以使用1个css类或更改javascript以删除所有已检查的类，并像在页面加载时一样添加它们。

updateBorders();

$(":radio").on("change", e => {
    const $div = $(e.target).closest(".discount");
    console.log($div);
        updateBorders();
});

function updateBorders() {
    $(".discount").removeClass("checked");
    $(".discount2").removeClass("checked");
    $(":radio:checked").closest(".discount").addClass("checked");
        $(":radio:checked").closest(".discount2").addClass("checked")
}

Full JSFiddle here.