如何让input type="checkbox"保留数据值并修改深色模式代码使checkbox状态持久化？

问题1：让<input type="checkbox">保留选中状态 #

要让checkbox记住选中状态，核心思路是把状态存在本地存储（localStorage）里，页面加载时读取存储值并同步到checkbox的checked属性上。具体操作分两步：

• 页面初始化时，从localStorage取出之前保存的状态（如果有的话）
• 将这个状态赋值给checkbox的checked属性；用户点击checkbox时，同步更新localStorage里的状态

问题2：结合深色模式代码同步Checkbox选中状态 #

针对你提供的深色模式实现，我们需要把checkbox的选中状态和主题绑定——比如深色模式对应checkbox选中，浅色模式对应未选中。下面是修改后的完整代码：

修改后的JavaScript代码 #

var toggle = document.getElementById("test_switch");
var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

// 页面加载时同步主题和checkbox状态
if (storedTheme) {
    document.documentElement.setAttribute('data-theme', storedTheme);
    // 根据主题设置checkbox状态：dark对应选中，light对应未选中
    toggle.checked = storedTheme === "dark";
}

toggle.onclick = function() {
    // 直接通过checkbox的选中状态决定目标主题
    var targetTheme = this.checked ? "dark" : "light";
    document.documentElement.setAttribute('data-theme', targetTheme);
    localStorage.setItem('theme', targetTheme);
};

对应的Checkbox代码（保持原结构即可） #

<label for="mode_test">
    <input type="checkbox" id="test_switch">
</label>

关键修改点说明： #

1. 初始化同步状态：设置页面主题后，根据storedTheme直接给toggle.checked赋值，确保页面加载时checkbox状态和当前主题一致。
2. 简化点击逻辑：点击checkbox时，直接用this.checked（当前checkbox的选中状态）来判断要切换的主题，既同步了主题，又不用额外手动修改checkbox状态（点击本身会自动切换checked值）。

额外小提示 #

如果想让checkbox看起来像个开关按钮，可以通过CSS自定义样式，不过这部分不影响核心功能逻辑，按需调整即可。

内容的提问来源于stack exchange，提问作者kaiel_pineda