javascript - 使用 javascript 设计单选按钮标签，只有一个标签有颜色

Question

你好，我正在尝试为单选按钮的标签着色，当它被选中

我不明白为什么它只适用于第一个单选按钮:Mon

当我检查 Mon 时，它变红了，但是当我检查 Tue 时，Mon 变黑了，但是 Tue 是黑色而不是红色这是为什么？

<ul>
  <li><input type="radio" id="day" name="day" value="Mon" onclick="myFunction()"></li>
  <label id="daylab" for="day">Mon</label>

  <li><input type="radio" id="day" name="day" value="Tue" onclick="myFunction()"></li>
  <label id="daylab" for="day">Tue</label>

function myFunction() {
    var checkBox = document.getElementById("day");

    if (checkBox.checked == true){
        document.getElementById("daylab").style.color = "red";
    } else {
         document.getElementById("daylab").style.color = "black";
    }
}
</script>

Answer 1

Id 在 HTML 中是唯一的，因此标记无效并导致您的逻辑无法正常工作。

尝试设置一个名称而不是 id 并对其进行处理。

这是为兄弟 label 设置特定颜色的替代方法

• 找到最近的父 ul 并删除类 active。
• 然后，找到最近的 li 并将类 active 添加到同级 label。

Array.prototype.forEach.call(document.querySelectorAll('[name="day"]'), function(elem) {
  elem.addEventListener('change', myFunction);
});

function myFunction() {
 Array.prototype.forEach.call(this.closest('ul').querySelectorAll('.active'), function(activeElem) {
  activeElem.classList.remove('active');
});

  this.closest('li').querySelector('label').classList.add('active');
}

.active {
  color: lightgreen
}

<ul>
  <li>
    <label for="day">Mon</label>
    <input type="radio" name="day" value="Mon">
  </li>

  <li>
    <label for="day">Tue</label>
    <input type="radio" name="day" value="Tue">
  </li>
</ul>