Question

您好我正在尝试为单选按钮的标签着色checked

我不明白为什么它只适用于第一个单选按钮：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

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

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

这是为兄弟label

设置特定颜色的替代方法

查找最近的父ul并删除课程active。
然后，找到最接近的li，并将班级active添加到同级label。

＆＃13;

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');
}

＆＃13;

.active {
  color: lightgreen
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用css来执行此操作

input[type="radio"]:checked+label {
  color: red;
}

HTML整理：

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

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

Running example

Answer 3

我使用纯css进行个性化输入收音机！例如：

input[type=radio]:checked 
{
    background: #F00;
}

但在使用此代码之前，请使用以下代码规范化输入无线电：

input[type=radio]
 {
    padding: 4px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 30px;
    outline: none;
    margin: 2px;
    width: 14px;
    height: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

使用javascript设置单选按钮标签，只有一个标签变色

3 个答案: