Javascript: Change label background color on checkbox

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

Answers:

Answer

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

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

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

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

You are missing an equals in the if statement.. Is that a typo error or is the solution to your problem?

Answer

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

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/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.