使用JavaScript设置单选按钮标签样式：仅首个标签变色问题

嗨，这个问题我太熟悉啦！核心问题出在你重复使用了同一个ID，这在HTML里是绝对不允许的，咱们慢慢理清楚：

为什么只有第一个单选按钮生效？ #

HTML规则明确规定：页面上的每个元素ID必须是唯一的。你给所有单选按钮都设了id="day"，给标签都设了id="daylab"，浏览器在查找元素时，只会返回第一个匹配到的元素。所以当你点击Tue的单选按钮时，你的JS代码其实还是在操作第一个Mon的标签，自然Tue的标签不会变红。

修正方案1：用JavaScript解决 #

首先先把HTML结构改对，给每个单选按钮和对应的标签设置唯一的ID，并且把单选按钮和标签放在同一个<li>里（结构更合理），同时把当前点击的单选按钮传给函数：

<ul>
  <li>
    <input type="radio" id="day-mon" name="day" value="Mon" onclick="myFunction(this)">
    <label for="day-mon">Mon</label>
  </li>
  <li>
    <input type="radio" id="day-tue" name="day" value="Tue" onclick="myFunction(this)">
    <label for="day-tue">Tue</label>
  </li>
</ul>

然后修改你的myFunction函数，先把所有同组的标签恢复默认颜色，再给当前选中的标签设为红色：

function myFunction(radio) {
  // 获取同组所有单选按钮
  const allDayRadios = document.getElementsByName(radio.name);
  
  // 遍历所有单选按钮，把对应的标签都改成黑色
  allDayRadios.forEach(radioBtn => {
    const correspondingLabel = document.querySelector(`label[for="${radioBtn.id}"]`);
    if (correspondingLabel) {
      correspondingLabel.style.color = "black";
    }
  });
  
  // 给当前选中的单选按钮对应的标签设置红色
  const currentLabel = document.querySelector(`label[for="${radio.id}"]`);
  if (currentLabel) {
    currentLabel.style.color = "red";
  }
}

修正方案2：纯CSS实现（更推荐） #

其实完全不用写JavaScript，利用CSS的:checked伪类就能轻松实现，代码更简洁且符合语义化：
先整理好HTML结构（同样保证ID唯一）：

<ul>
  <li>
    <input type="radio" id="day-mon" name="day" value="Mon">
    <label for="day-mon">Mon</label>
  </li>
  <li>
    <input type="radio" id="day-tue" name="day" value="Tue">
    <label for="day-tue">Tue</label>
  </li>
</ul>

然后添加这段CSS：

/* 当单选按钮被选中时，它后面紧挨着的标签变成红色 */
input[type="radio"]:checked + label {
  color: red;
}

这个方案的好处是，单选按钮组本身就有互斥选中的特性，所以当你切换选中项时，CSS会自动帮你切换标签的颜色，完全不需要额外的JS逻辑。

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