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

Saving Checkbox State In HTML or Javascript

本文关键字：保存 复选框 状态 Javascript HTML      更新时间：2023-09-26

我正在尝试设计一个网站(可能是一个Chrome扩展)，这将允许我标记哪些字符做了哪些事件在我玩的在线游戏。如果我能够在访问之间保存复选框的值(理想情况下，还有角色名称)，我会很高兴，但我并不擅长编码。此外，我强烈希望这些信息可以在命令下保存/清除/重新加载，而不是其他方式。

有问题的页面，如果我的代码不高效或不吸引人，请原谅我。实际上，我更喜欢把它弄得更乱一点，但为了你的利益，我把它整理了一下。

这里有一个我正在尝试处理的建议:

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仍然在顶部，其余的代码我将放在reset函数之上)。

帮助吗?

这一行:

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

在文档的head中并立即运行。运行时，所有复选框都不存在。

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

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

相关文章：