CODEWITHSUNDEEP
javascripthtml
user3566344
user3566344

Reputation: 35

Javascript - How to set checkbox checked based on a variable

I've done my best to search all of the answers and can't find anything that answers this specifically. So, if you find something, please let me know and I'll remove this right away.

I created a JSFiddle to show my problem (JS portion copied below for ease of reference): http://jsfiddle.net/hg67R/1/

When I am trying to set the value of a checkbox based on the value of a variable it will not seem to set correctly. The example I created should save the current state of each checkbox (which is does correctly). Then, no matter how you change those checkboxes, it should change them back when you click load. The storage variables are correct but it is not setting the checkboxes correctly. I'm certain it is something obvious but I sure can't see it. 

function save() {
    localStorage.setItem("numbers", document.getElementById("Numbers").checked);
    localStorage.setItem("tips", document.getElementById("Tips").checked);
}

function load() {
    document.getElementById("Numbers").checked = localStorage.numbers;
    document.getElementById("Tips").checked = localStorage.tips;

    console.log("numbers storage: " + localStorage.numbers);
    console.log("numbers box: " + document.getElementById("Numbers").checked);
    console.log("tips storage: " + localStorage.tips);
    console.log("tips box: " + document.getElementById("Tips").checked);
}

The console.logs just show me that the variables are storing and loading correctly.

Thanks!

Upvotes: 2

Views: 17253

Answers (2)

Icepickle
Icepickle

Reputation: 12796

In addition to mrk answer's:

function save() {
    localStorage.setItem("numbers", document.getElementById("Numbers").checked);
    localStorage.setItem("tips", document.getElementById("Tips").checked);
}

function load() {
    document.getElementById("Numbers").checked = localStorage.numbers === 'true';
    document.getElementById("Tips").checked = localStorage.tips === 'true';

    console.log("numbers storage: " + localStorage.numbers);
    console.log("numbers box: " + document.getElementById("Numbers").checked);
    console.log("tips storage: " + localStorage.tips);
    console.log("tips box: " + document.getElementById("Tips").checked);
}
<input type="checkbox" id="Numbers">Short Numbers</input>
<input type="checkbox" id="Tips">Show Tips</input>
<br />
<br />
<button type="button" onClick="save()">Save</button>
<button type="button" onClick="load()">Load</button>

Where the biggest change is that I check if the localStorage value exactly agrees with "true".

document.getElementById("Numbers").checked = localStorage.numbers === 'true';

Upvotes: 4

mrk
mrk

Reputation: 5117

Two things:

Localstorage stores string keys and string values

The proper value of a checkbox's checked attribute is clearly described here:

What's the proper value for a checked attribute of an HTML checkbox?

Specifically, this part:

A switch is "on" when the control element's checked attribute is set.

What this means is that it doesn't matter what one puts there, and in fact it only needs to be defined. All of the following will be checked:

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes"> 
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="no"> 
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="blue">
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="false">

And only the following will be unchecked:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

Upvotes: 0

Related Questions