радио-кнопка меняет стиль на проверено

Question

У меня есть набор переключателей.

<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() {
    var chkbox = $(this);
      chkbox.is(':checked') ?
        chkbox.addClass('chosen') : $chkbox.removeClass('chosen');

но если человек щелкает один вариант, он работает и применяет класс, то, если он нажимает секунду, он применяет класс ко второму, но не удаляет класс из первого. как удалить класс? спасибо!

Answer 1

Потому что вы активируете функцию только на включенном радио.Попробуйте это:

$("input.RadioButton").click(function(){
   $("input.RadioButton").removeClass('chosen');
   $(this).addClass('chosen');
})

Таким образом вы удаляете «выбранный» класс из всех радиостанций, а затем назначаете класс только для того, на который нажали.

Answer 2

Прежде всего, вам не нужно иметь "RadioButton" в качестве класса, потому что вы можете выбрать их через атрибут, подобный этому ...

$("input[type=radio]")

Во-вторых, вы должны удалить выбранный класс, прежде чем применять его к this ...

$("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");
});