Переключатель изменения текста при нажатии CSS jQuery

Question

В настоящее время я пытаюсь изменить цвет текста при нажатии на переключатель. Это работает, но оно должно меняться обратно всякий раз, когда выбирается другой. Я не могу заставить это работать, что бы я ни пытался. Я думал, что это лучший способ решить мою проблему.

Это код, который я сейчас использую: (переключатели)

<div class="checkboxes">
<label class="container"><div class="checkboxcijfer">1</div>
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

<label class="container"><div class="checkboxcijfer">2</div>
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

JQuery (Я удалил все, что пытался. Я следовал учебному пособию, где они также удалили класс для братьев и сестер. К сожалению, это не работает. Это приводит к изменению цвета элемента:

    $(function() {
    $('.container [type="radio"]').on('change', function() {

        $(this).prev().addClass('red')

    });
    });

И простой CSS:

.white
        {
            color: #FFF;
        }

Так вот как это работает в настоящее время

И это то, что идет не так, когда вы щелкаете.

Answer 1

Найдите элемент с классом .red и удалите класс:

$(function() {
  $('.container [type="radio"]').on('change', function() {
    $('.red').removeClass('red');
    $(this).prev().addClass('red')

  });
});

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label class="container">
    <div class="checkboxcijfer">1</div>
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>

  <label class="container">
    <div class="checkboxcijfer">2</div>
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>

Если вы можете переключить input и div, вы можете иметь решение только для CSS, используя соседний селектор брата :

input:checked + .checkboxcijfer {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label class="container">
    <input type="radio" name="radio">
    <div class="checkboxcijfer">1</div>
    <span class="checkmark"></span>
  </label>

  <label class="container">
    <input type="radio" name="radio">
    <div class="checkboxcijfer">2</div>
    <span class="checkmark"></span>
  </label>
</div>