html - Javascript - How to set checkbox checked based on a variable - Stack Overflow

admin管理员组

文章数量:1356097

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

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!

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/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!

• javascript
• html

Share Improve this question Follow asked May 20, 2014 at 16:48 user3566344user3566344 3511 gold badge11 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

本文标签： htmlJavascriptHow to set checkbox checked based on a variableStack Overflow