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

我试图在复选框的checked/unchecked状态的基础上，在表单中的每个复选框中更改标签的背景颜色。到目前为止，我已经改变了它的初始状态，但它不会改变回来时，我取消：Javascript：更改复选框上的标签背景颜色

的javascript：

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

HTML：

个

CSS：

label { 
margin:0px 2px 4px 2px; 
padding: 1px; 
background-color: #eee; 
display: block; 
width: 50px; 
}

来源

2013-05-21 user2219915

myLayer.checked === true –

虽然还有其他的语法错误，但它不会工作，主要是因为您检查您的标签是否被选中，而不是输入。 – Josh

我刚刚意识到（===而不是=），但它仍然不起作用 – user2219915

http://jsfiddle.net/7wnCL/20/

myLayer.checked = true

是一个赋值，而不是一个条件。

if (myLayer.checked = true)

是每一个评价为

if (true)

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

if (myLayer.checked === true)

此外，你应该检查输入的，而不是为层，它不具有任何checked属性：

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

来源

2013-05-21 21:02:30 bwoebi

事实上'myLayer'是指标签，而不是输入。没有检查标签的属性。 – Josh

是的，我刚注意到它，会更新。 – bwoebi

@Josh刚刚修好了 – bwoebi

你缺少if语句等号.. 那是一个错字错误或者是解决问题了吗？

来源

2013-05-21 21:01:38 BeNdErR

你不设置上的颜色标签，但在复选框上。 jQuery让您轻松选择/遍历DOM元素（也有助于清理了很多不必要的ID），看到这个小提琴：

http://jsfiddle.net/7wnCL/17/

$('input[type=checkbox]').change(function(){ 
    if($(this).prop('checked')){ 
     $(this).parent().css('backgroundColor', '#bff0a1'); 
    }else{ 
     $(this).parent().css('backgroundColor', '#eee');   
    } 
});

来源

2013-05-21 21:07:53 darma

当一个问题没有被标记，并且没有在代码中使用jQuery时，你通常不应该使用jQuery。 – bwoebi

@bwoebi：好的，但是你看，你甚至一开始都没有看到自己的错误。你只回答有关分配问题的问题。 OP有助于了解可以使代码更易于下次阅读和维护的工具。 – darma

我只是在说这个，因为有些人已经对我说过这些;主要是我没有问题;-) – bwoebi

除了“== '别人提到的错字，你也在检查标签是否被检查，而不是输入。尝试：

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"; 
    }; 
}

的jsfiddle：http://jsfiddle.net/7wnCL/26/

来源

2013-05-21 21:08:40

非jQuery的路线。将第二个参数传递给你的statecheck函数。

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

和JavaScript

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

http://jsfiddle.net/7wnCL/4/

来源

2013-05-21 21:10:52 rssllbrns

我的解决方案基于您有所帮助输入：

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"; 
}; 

}

http://jsfiddle.net/7wnCL/29/

来源

2013-05-21 21:13:46 user2219915

你的脚本中有一些错误。

你传入拉布勒ID和检查labelId.checked这不不存在
您正在使用是否应==条件

你这是怎么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

<input type="checkbox" value="checkbox" onchange="statecheck('Alabama', this)" />

来源

2013-05-21 21:15:08 JavaKB

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

回答

相关问题