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

标签 javascript css checkbox background-color

我正在尝试根据复选框的选中/未选中状态更改表单中每个复选框中标签的背景颜色。到目前为止,我最初更改了它,但当我取消选中时它不会变回:

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

JavaScript:

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

html:

<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>

CSS:

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

最佳答案

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

myLayer.checked = true

是赋值,不是条件。

if (myLayer.checked = true)

每次都被评估为

if (true)

else部分永远不会被执行。所以将其更改为:

if (myLayer.checked === true)

此外,您应该检查输入,而不是图层,它没有任何检查属性:

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

关于Javascript:更改复选框上的标签背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16679366/

相关文章:

html - 在 iframe 中将按钮居中

html - 悬停在主 div 上时使另外两个 div 改变颜色

python - 带有附加命令的 Tkinter 复选框

php - 如何在 php mysql 中存储 javascript 复选框结果

javascript - 尝试使用来自 Controller 的 json 数据加载 Simile 时间线

javascript - 如何在 Angular 6 中使用 RoundSliderUI

html - 对于表格数据,什么渲染速度更快,CSS 还是 <TABLE>?

php - 在 PHP 中更新已经选中的复选框

javascript - 为什么更改哈希不会影响历史长度?

javascript - 打字错误3 6.1.7 : How to load Javascript-file in own extension in the left backend-iframe?