JavaScript复选框始终处于未选中状态吗？

Question

我正在尝试对我的网站实施明/暗主题切换，但是我在切换所使用的复选框方面遇到了问题。这是HTML：

    <input type="checkbox" id="theme-switch" name="theme"/>
    <label for="theme-switch"><img src="./images/theme-switch-light.png" alt="Theme"/></label>

这是我在JavaScript上使用的一些工具（基于this tutorial和this S/O thread）：

    // without jQuery
    const themeCheckbox = document.querySelector("input[name=theme]");
    themeCheckbox.addEventListener('change', () => {
        if (this.checked) {
            console.log('dark');
        } else {
            console.log('light');
        }
    });

    // with jQuery (take 1)
    $('input[name=theme]').change(() => {
        if($(this).is(':checked')) {
            console.log('dark');
        } else {
            console.log('light');
        }
    });

    // with jQuery (take 2)
    $('#theme-switch').change(() => {
        if($(this).is(':checked')) {
            console.log('dark');
        } else {
            console.log('light');
        }
    });

问题在于，无论是否选中此框，所有这些都始终打印“浅色”。这意味着它正确地检索了该元素并触发了.change（）方法，但是由于某种原因，它始终认为该值未被检查。我引用了this S/O thread并尝试了建议的答案，但是它对我不起作用。有什么想法吗？