单击单选按钮更改文本 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（我已经删除了我尝试过的所有内容。我遵循了一个教程，其中他们还删除了兄弟姐妹的 class。不幸的是，这不起作用。这使得项目颜色变化：

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

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

    });
    });

而简单的 CSS:

.white
        {
            color: #FFF;
        }

So here is how it currently works

And this is what's going wrong when clicking away.

Answer 1

找到class.red的元素，去掉class:

$(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，则可以使用 adjacent sibling selector:

获得仅 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>

单击单选按钮更改文本 CSS jQuery

Radio button change text on click CSS jQuery

html

css

jquery

button

radio