選中單選按鈕時將類添加到父 div，如果選中其他單選按鈕則刪除類

Question

在選中單選按鈕時，我已能夠為父DIV添加一個類。 現在，當我想單擊另一個單選按鈕時，我想刪除前一個 div 上的類。

這就是我所擁有的：

 $(".radio").change(function() { if ($(this).is(":checked")) { $(this).parent().parent().parent().addClass('selected-prize'); } });

 .selected-prize { border: 1px solid red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt=""> </div> <div class="form-check"> <input class="radio" type="radio" id="test3" name="radio-group2"> <label for="test3">Select</label> </div> </div> </div> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt=""> </div> <div class="form-check"> <input class="radio" type="radio" id="test4" name="radio-group2"> <label for="test4">Select</label> </div> </div> </div>

Answer 1

您可以先刪除類selected-prize ：

 $(".radio").change(function() { $(".prize-wrapper").removeClass('selected-prize'); if ($(this).is(":checked")) { $(this).parent().parent().parent().addClass('selected-prize'); } });

 .selected-prize { border: 1px solid red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br /> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt="" /> </div> <div class="form-check"> <input class="radio" type="radio" id="test3" name="radio-group2" /> <label for="test3">Select</label> </div> </div> </div> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br /> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt="" /> </div> <div class="form-check"> <input class="radio" type="radio" id="test4" name="radio-group2" /> <label for="test4">Select</label> </div> </div> </div>

Answer 2

$(".radio").change(function() {
  $('.prize-wrapper').removeClass('selected-prize');
  if ($(this).is(":checked")) {
    $(this).closest('.selected-prize').addClass('selected-prize');
  }
});

Answer 3

 $(".radio").change(function() { if ($(this).is(":checked")) { $('.selected-prize').each(function(){ $(this).removeClass('selected-prize'); }); $(this).parent().parent().parent().addClass('selected-prize'); } });

 .selected-prize { border: 1px solid red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt=""> </div> <div class="form-check"> <input class="radio" type="radio" id="test3" name="radio-group2"> <label for="test3">Select</label> </div> </div> </div> <div class="prize-wrapper"> <div class="prize"> <h1>Cooking class <br> Cooking class</h1> <div class="img-holder"> <img src="{{ asset('assets/images/emo.png') }}" alt=""> </div> <div class="form-check"> <input class="radio" type="radio" id="test4" name="radio-group2"> <label for="test4">Select</label> </div> </div> </div>

Answer 4

$(".radio").change(function() {
  var prize = $(this).parent().parent().parent()
  prize.toggleClass('selected-prize').siblings().removeClass('selected-prize');
});