点击Radio按钮切换文本颜色（切换时恢复）的CSS+jQuery实现问题

嘿，我懂你这问题！单选按钮点了文本变色没问题，但切到另一个的时候，之前的文本颜色就是回不去，对吧？这是因为你只处理了「选中时加样式」，没管「取消选中时清样式」的事儿。我给你俩方案，看你需求选：

如果你不需要兼容太老的浏览器（比如IE），用CSS的:has()伪类就能轻松搞定，完全不用写JS：

首先补全你的HTML结构（确保每个单选按钮都在对应的label容器里）：

<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>
  <label class="container">
    <div class="checkboxcijfer">3</div>
    <input type="radio" name="radio">
    <span class="checkmark"></span>
  </label>
</div>

然后写CSS：

/* 默认文本颜色 */
.checkboxcijfer {
  color: #333;
  /* 加个过渡动画更丝滑 */
  transition: color 0.2s ease;
}

/* 当容器内的单选按钮被选中时，修改文本颜色 */
.container:has(input[type="radio"]:checked) .checkboxcijfer {
  color: #ff4500; /* 换成你想要的选中颜色 */
}

原理很简单：当label容器里的单选按钮被选中时，:has()条件触发，自动给里面的文本加样式；切换到其他单选按钮时，原来的容器不再满足:has()条件，文本颜色就自动恢复默认了。

如果需要兼容不支持:has()的旧浏览器，用JS来控制就稳了：

同样先补全HTML（给单选按钮加个类方便选择）：

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

CSS先定义好默认和选中的样式：

.checkboxcijfer {
  color: #333;
  transition: color 0.2s ease;
}
/* 选中状态的类 */
.checkboxcijfer.active {
  color: #ff4500;
}

最后写JS逻辑：

// 获取同组所有单选按钮
const radioBtns = document.querySelectorAll('.radio-group');

// 给每个按钮绑定点击事件
radioBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 第一步：先把所有同组的文本样式重置
    radioBtns.forEach(item => {
      const textElement = item.closest('.container').querySelector('.checkboxcijfer');
      textElement.classList.remove('active');
    });
    // 第二步：给当前选中的按钮对应的文本加样式
    const currentText = this.closest('.container').querySelector('.checkboxcijfer');
    currentText.classList.add('active');
  });
});

这个逻辑就是每次点击单选按钮时，先把同组所有文本的选中样式清空，再给当前选中的那个加上，保证永远只有当前选中的文本是变色状态。

内容的提问来源于stack exchange，提问作者Marnix