我正在尝试根据复选框的已选中/未选中状态更改表单中每个复选框中标签的背景颜色。到目前为止,我最初要更改它,但是当我取消选中时它不会改变:
的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;
}
答案 0 :(得分:4)
myLayer.checked = true
是一项任务,而非条件。
if (myLayer.checked = true)
每次评估为
if (true)
其他部分永远不会被执行。所以改成它:
if (myLayer.checked === true)
此外,您应检查输入,而不是检查没有任何已检查属性的图层:
if (myLayer.childNodes[0].checked === true)
答案 1 :(得分:1)
非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";
}
}
答案 2 :(得分:1)
我的解决方案基于您的有用输入:
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";
};
}
答案 3 :(得分:1)
你的剧本中有几个错误。
这就是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)" />
答案 4 :(得分:0)
你在if语句中缺少一个等号.. 这是错字错误还是您问题的解决方案?
答案 5 :(得分:0)
您没有在标签上设置颜色,而是在复选框上设置颜色。 jQuery使您可以轻松选择/遍历DOM元素(还有助于清理大量不必要的ID),请看这个小提琴:
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().css('backgroundColor', '#bff0a1');
}else{
$(this).parent().css('backgroundColor', '#eee');
}
});
答案 6 :(得分:0)
除了别人提到的'=='拼写错误之外,您还要检查标签是否被检查而不是输入。尝试:
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/