Javascript：更改复选框上的标签背景色

我正在尝试根据复选框的选中/未选中状态更改表单中每个复选框中标签的背景色。到目前为止，我最初已将其更改，但取消选中后不会再更改：

javascript:

function statecheck(layer) {
var myLayer = document.getElementById(layer);
 if(myLayer.checked = true){
 myLayer.style.backgroundColor = "#bff0a1";
 } else {
 myLayer.style.backgroundColor = "#eee";
 };
}

html:

---

if语句中缺少一个equals。。

---

这是打字错误还是问题的解决方案？

if语句中缺少一个equals。。 这是打字错误还是解决问题的方法

这是一项任务，而不是条件

if (myLayer.checked = true)

每次都被评估为

if (true)

其他部分永远不会被执行。因此，将其更改为：

if (myLayer.checked === true)

此外，您应该检查输入，而不是图层，因为图层没有任何已检查的特性：

if (myLayer.childNodes[0].checked === true)

这是一项任务，而不是条件

if (myLayer.checked = true)

每次都被评估为

if (true)

其他部分永远不会被执行。因此，将其更改为：

if (myLayer.checked === true)

此外，您应该检查输入，而不是图层，因为图层没有任何已检查的特性：

if (myLayer.childNodes[0].checked === true)

---

您没有在标签上设置颜色，而是在复选框上设置颜色。 jQuery使您可以轻松地选择/遍历DOM元素，还可以帮助清理大量不必要的ID，请参阅以下内容：

---

您没有在标签上设置颜色，而是在复选框上设置颜色。 jQuery使您可以轻松地选择/遍历DOM元素，还可以帮助清理大量不必要的ID，请参阅以下内容：

---

除了其他人提到的“==”输入错误外，您还需要检查是否选中了标签而不是输入。尝试：

function statecheck(layer) {
    var myLayer = document.getElementById(layer),
        input = myLayer.getElementsByTagName('input')[0];
    //myLayer.style.backgroundColor = "#bff0a1";
    if(input.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };
}

---

jsiddle:

除了其他人提到的“==”输入错误之外，您还需要检查是否选中了标签而不是输入。尝试：

function statecheck(layer) {
    var myLayer = document.getElementById(layer),
        input = myLayer.getElementsByTagName('input')[0];
    //myLayer.style.backgroundColor = "#bff0a1";
    if(input.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };
}

---

jsidle:

非jQuery路由。将第二个参数传递给statecheck函数

 <label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck(this,'AmericanSamoa')" />AS</label>

---

非jQuery路由。将第二个参数传递给statecheck函数

 <label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck(this,'AmericanSamoa')" />AS</label>

---

我的解决方案基于您的有用输入：

function statecheck(layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(myLayer.childNodes[0].checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
};

}

---

我的解决方案基于您的有用输入：

function statecheck(layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(myLayer.childNodes[0].checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
};

}

---

你的剧本中有几个错误

您正在传递标签id并检查labelId。已检查哪一个 不存在 您在if条件下使用了=应该是== 这就是JS方法的外观

function statecheck(layer, checkbox) {
    var myLayer = document.getElementById(layer);
    //myLayer.style.backgroundColor = "#bff0a1";
    if(checkbox.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };

}

HTML

---

你的剧本中有几个错误

您正在传递标签id并检查labelId。已检查哪一个 不存在 您在if条件下使用了=应该是== 这就是JS方法的外观

function statecheck(layer, checkbox) {
    var myLayer = document.getElementById(layer);
    //myLayer.style.backgroundColor = "#bff0a1";
    if(checkbox.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };

}

HTML

---

---

myLayer.checked===true虽然还有其他语法错误，但它不会起作用，主要是因为您正在检查标签是否已检查，而不是输入。我刚刚意识到===而不是=，但它仍然没有work@Josh有没有办法检查孩子是否选中了复选框？@user2219915检查我的答案…myLayer.checked===true虽然还有其他语法错误，但它不会起作用，主要是因为你检查的是标签是否被选中，而不是输入。我刚刚意识到===而不是==，但它仍然没有work@Josh有没有办法检查孩子是否选中了复选框？@user2219915检查我的答案……事实上myLayer指的是标签，而不是输入。label没有checked属性。事实上myLayer引用的是标签，而不是输入。label没有checked属性。当一个问题没有被标记，并且代码中没有使用jQuery时，通常不应该使用jQuery。@bwoebi：好的，但是你看，你一开始甚至没有看到错误。你只回答了一开始的作业问题。了解下一次可以使代码更易于阅读和维护的工具对OP是有益的；基本上我对此没有问题-是的，谢谢，为了避免jQuery。这将使生活变得简单，但我不能将其用于这个特定的项目。当问题没有标记，并且代码中没有使用jQuery时，通常不应该使用jQuery。@bwoebi:好的，但你看，你一开始甚至没有看到错误。你只回答了一开始的作业问题。了解下一次可以使代码更易于阅读和维护的工具对OP是有益的；基本上我对此没有问题-是的，谢谢，为了避免jQuery。这将使生活变得简单，但我不能把它用于这个特殊的项目。