CSS Javascript：更改复选框上的标签背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16679366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Change label background color on checkbox
提问by user2219915
I am trying to change the background color of a label in each checkbox in a form based on the checked/unchecked state of the checkbox.So far I got it to change initially, but it won't change back when I uncheck:
我正在尝试根据复选框的选中/未选中状态更改表单中每个复选框中标签的背景颜色。到目前为止，我最初对其进行了更改，但是当我取消选中时它不会更改回来：
javascript:
javascript:
function statecheck(layer) {
var myLayer = document.getElementById(layer);
if(myLayer.checked = true){
myLayer.style.backgroundColor = "#bff0a1";
} else {
myLayer.style.backgroundColor = "#eee";
};
}
html:
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:
css：
label {
margin:0px 2px 4px 2px;
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
回答by bwoebi
myLayer.checked = true
is an assignment, not a condition.
是一个任务，而不是一个条件。
if (myLayer.checked = true)
is every time evaluated as
每次被评估为
if (true)
And the else part will never be executed. So change it to:
而 else 部分永远不会被执行。所以改成：
if (myLayer.checked === true)
Also, you should check for the input, and not for the layer, which doesn't have any checked property:
此外，您应该检查输入，而不是检查没有任何检查属性的图层：
if (myLayer.childNodes[0].checked === true)
回答by rssllbrns
the non-jQuery route. pass a second param to your statecheck function.
非 jQuery 路线。将第二个参数传递给您的 statecheck 函数。
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck(this,'AmericanSamoa')" />AS</label>
and the javascript
和 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";
}
}
回答by user2219915
My solution based on your helpful input:
我的解决方案基于您的有用意见：
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";
};
}
回答by JavaKB
There are couple of mistakes, in your script.
您的脚本中有几个错误。
- You are passing lable id and checking for labelId.checked which does not exist
- You are using = in if condition which should be ==
- 您正在传递标签 ID 并检查不存在的 labelId.checked
- 您在 if 条件中使用 = 应该是 ==
This is how you JS method should look like
这就是你的 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
HTML
<input type="checkbox" value="checkbox" onchange="statecheck('Alabama', this)" />
回答by BeNdErR
You are missing an equals in the if statement.. Is that a typo error or is the solution to your problem?
您在 if 语句中缺少等号。这是拼写错误还是您的问题的解决方案？
回答by darma
Your are not setting the color on the label but on the checkbox. jQuery makes it easy for you to select / traverse DOM elements (and also helps clean-up a lot of unnecessary IDs), see this fiddle :
您不是在标签上设置颜色，而是在复选框上设置颜色。jQuery 使您可以轻松选择/遍历 DOM 元素（还有助于清理许多不必要的 ID），请参阅此小提琴：
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().css('backgroundColor', '#bff0a1');
}else{
$(this).parent().css('backgroundColor', '#eee');
}
});
回答by Rob Johnstone
In addition to the '==' typo mentioned by others, you are also checking whether the label is checked rather than the input. Try:
除了其他人提到的“==”拼写错误之外，您还要检查是否检查了标签而不是输入。尝试：
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/
jsFiddle：http: //jsfiddle.net/7wnCL/26/
