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

时间:2013-05-21 20:57:08

标签: 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;
}

7 个答案:

答案 0 :(得分:4)

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

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

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

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

}

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

答案 3 :(得分:1)

你的剧本中有几个错误。

  • 您正在传递标签ID并检查labelId.checked 不存在
  • 如果条件应为==
  • ,则使用= in

这就是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),请看这个小提琴:

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');        
    }
});

答案 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/