When trying to use ".checked", why is it not working in JavaScript? [duplicate]

When trying to use the ".checked" property, it does not return a true value and therefore I cannot get this test code to alert when checkbox is checked.

var lower = document.querySelector("#lower");

if (lower.checked === true) {
    alert('CHECKED!');
}

<li><label for="lower"><input type="checkbox" id="lower">lowercase</label></li>

I also tried the following javascript:

var lower = document.querySelector("#lower");

if (lower.checked) {
    alert('CHECKED!');
}

also tried it with document.getElementById("lower"). Any ideas?