Javascript - How to set checkbox checked based on a variable

Question

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!

score 4 · Accepted Answer · edited Feb 09 '21 at 08:26

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

Thank you for this. I've never seen a statement like this (where you test for true/false in the second half of the equal). I'll have to do some more research on it. So, what is happening here if localStoreage.numbers is false? Does .checked = "", thus it is not checked? — user3566344, May 20 '14 at 17:38
well, it is simply a shorthand way of saying `if (localStorage.number === 'true) { document.getElementById('Number').checked = true; } else { document.getElementById('Number').checked = false; }`. You are simply assigning the result of the comparison to the checked (which will always be true or false) :). When the localStorage.numbers is 'false' (mind the string) here, then localStorage.numbers would still read as true when you would assign it directly to .checked (as in, it has a value) — Icepickle, May 20 '14 at 21:58

score 0 · Answer 2 · edited May 23 '17 at 12:11

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

Thank you! That makes a lot of sense. So, how can I uncheck with JS? I'm just looking for a simpler to understand version than what Icepickle mentioned below in order to help me wrap my head around it. — user3566344, May 20 '14 at 17:43

Javascript - How to set checkbox checked based on a variable

2 Answers2