在HTML或Javascript中保存复选框状态

时间:2013-06-19 08:10:31

标签: javascript html checkbox

我正在尝试设计一个网站(可能是制作Chrome扩展程序),这样我就可以在我玩的在线游戏中标记哪些角色已经完成了哪些事件。我喜欢它,如果我可以选择保存访问之间的复选框的值(理想情况下,也是字符名称),但我不擅长编码。此外,如果可以在命令中保存/清除/重新加载此信息,我强烈希望它,否则。

The page in question,如果我的代码效率不高或有吸引力,请原谅我。我实际上更喜欢与它合作多一点,但我为了你的利益整理​​它。

我曾尝试过使用here的建议:

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

但是虽然它在测试中工作正常但是当我将它放入我的文档时它将无法工作(你会看到顶部的var i仍然是,我将其他代码放在重置函数之上)。

帮助?

1 个答案:

答案 0 :(得分:0)

这一行:

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

位于文档的head中并立即运行。运行时没有复选框。

我建议将该脚本放在body元素的末尾或将其放在window.onload = function() {}中。

如果你在发布的工作jsFiddle链接中检查DOM结构,你会看到它将脚本放在body元素的末尾。