Saving Checkbox State In HTML or Javascript

Question

I'm trying to design a site (possibly to make into a Chrome extension) that will allow me to mark which characters have done which events in an online game I play. I'd love it if I had the option to save the values of the checkboxes between visits (and ideally, character names as well), but I'm not great at coding. Also, I'd strongly prefer it if this information could be saved/cleared/reloaded on command, and not otherwise.

The page in question, please pardon me if my code isn't efficient or attractive. I actually prefer to work with it a bit more bunched up, but I tidied it for your benefits.

There had been a suggestion here that I was trying to work with:

var i, checkboxes = document.querySelectorAll('input[type=checkbox]');

function save() {
    for (i = 0; i < checkboxes.length; i++) {
        localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); 
    }
}

function load_() {
    for (i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
    }
}

But while it works fine in the test, it won't work when I put it into my document (you'll see the var i at the top still, the rest of the code I'd put above the reset function).

Help?

Try to localize i: for (var i = 0; i < checkboxes.length; i++) {. — dfsq
– dfsq, Commented Jun 19, 2013 at 8:17
@MohammadAreebSiddiqui localStorage can only handle strings so it's correct the way he do now in that regard (but unnessesary check at the end: checkboxes[i].checked = (localStorage.getItem(checkboxes[i].value) === 'true'); would do). — user1693593
– user1693593, Commented Jun 19, 2013 at 8:23

zdyn · Accepted Answer · 2013-06-19 08:38:13Z

1

This line:

var i, checkboxes = document.querySelectorAll('input[type=checkbox]');

is in the head of your document and runs immediately. None of the checkboxes exist at the time that it runs.

I'd suggest putting that script at the end of your body element or placing it in a window.onload = function() {}.

If you inspect the DOM structure in the working jsFiddle link you posted, you'll see it places the script at the end of the body element.

edited Jun 19, 2013 at 8:38

answered Jun 19, 2013 at 8:31

zdyn

2,1731 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Saving Checkbox State In HTML or Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related