复选框已选中但返回 false

Question

如果选中复选框，我想使用一些 JS 来执行某个功能。但是，我的输入字段复选框在选中时不断返回 false，我不明白为什么。

这是 HTML：

<input id="option_service_desk" type="checkbox"/>

这是 JS：

if (document.getElementById('option_service_desk').checked)
 { 
 console.log('service 247 checked');
} else {
 console.log("service 247 not checked");
}

我尝试在控制台中进行检查，事实上，即使在屏幕上进行了检查，它也返回为 false。

Answer 1

您遇到的问题似乎是由于复选框上缺少“更改”事件的事件侦听器。每当复选框的状态（选中或未选中）更改时，都会触发“change”事件。您当前的代码仅在页面加载时检查复选框的状态，而不是在单击复选框时检查复选框的状态。

const checkbox = document.getElementById('option_service_desk');

checkbox.addEventListener('change', function() {
   if (checkbox.checked) {
     console.log('Service 247 checked');
   } else {
     console.log('Service 247 not checked');
   }
});

<input id="option_service_desk" type="checkbox" />