Radio Switch Change Style

Question

I have a set of switches.

<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>

I want to highlight the one that is selected.

I used this code:

$('input.RadioButton').click(function() {
    var chkbox = $(this);
      chkbox.is(':checked') ?
        chkbox.addClass('chosen') : $chkbox.removeClass('chosen');

but if a person clicks on one option, he works and applies the class, and then, if he presses the second, he applies the class to the second, but does not remove the class from the first. how to remove a class? thanks!

Answer 1

Because you activate the function only on the pressed radio station. Try the following:

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

This way you delete the “selected” class from all the radio stations, and then assign the class only by clicking.

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