Javascript: Change label background color on checkbox

Question

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:

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

Answer 1

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

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:

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)

Answer 2

the non-jQuery route. pass a second param to your statecheck function.

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

and the 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/

Answer 3

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

}

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

Answer 4

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 ==

This is how you JS method should look like

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)" />

Answer 5

您在if语句中缺少等号。.这是拼写错误，还是您的问题的解决方案？

Answer 6

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 :

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

Answer 7

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/