Bootstrap 5.3.0 alpha开关组件状态判断异常问题求助

你的代码始终输出"not checked"的核心原因是箭头函数的this指向问题：箭头函数没有独立的执行上下文，这里的this并不指向触发点击事件的checkbox元素，而是继承自外层全局作用域（浏览器中为window），导致this.checked始终为undefined，条件判断永远不成立。

提供三种可行的修正方案：

方案1：改用普通函数作为事件回调 #

普通函数作为事件监听回调时，this会自动指向触发事件的DOM元素：

document.getElementById('test_switch').addEventListener('click', function() {
    if (this.checked) {
        console.log('checked');
    } else {
        console.log('not checked');
    }
});

方案2：通过事件对象获取目标元素 #

在箭头函数中使用事件参数e的target属性获取触发事件的checkbox：

document.getElementById('test_switch').addEventListener('click', (e) => {
    if (e.target.checked) {
        console.log('checked');
    } else {
        console.log('not checked');
    }
});

方案3：提前缓存DOM元素引用 #

先获取并保存checkbox元素的引用，在箭头函数中直接使用该引用访问checked属性：

const testSwitch = document.getElementById('test_switch');
testSwitch.addEventListener('click', () => {
    if (testSwitch.checked) {
        console.log('checked');
    } else {
        console.log('not checked');
    }
});

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