如何使“输入类型=“复选框”保留数据值？

Question

如何重写这段代码：

var toggle = document.getElementById("test_switch");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

所以这保留了它的复选标记：

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

我在一篇博客文章中偶然发现了上面的代码，其中包括本地存储和 (prefers-color-scheme: dark) 在他们的暗模式实现中，我只是不知道如何使用复选框来协调它。

谢谢。

Answer 1

您可以使用.checked 访问复选框值

var toggle = document.getElementById("test_switch");
console.log(toggle.checked) //returns true||false

有了它，您可以轻松检查当前检查的内容。