Tengo un objeto con una propiedad que almacena la propiedad checked de una casilla de verificación así:
var x = { isChecked: document.querySelector("input").checked }; function getX() { (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked")); } <input type="checkbox"> <button onclick="getX()">is the checkbox checked?</button> Al marcar y desmarcar la casilla de verificación, el valor de la propiedad isChecked no se actualiza. ¿Por qué podría ser eso?
Dado que .checked es un valor booleano, no un objeto, cuando dice isChecked: document.querySelector("input").checked , solo está configurando isChecked en el valor actual de element.checked . Haga isChecked una función para obtener el valor real cada vez que lo necesite.
var x = { isChecked: () => document.querySelector("input").checked }; function getX() { (x.isChecked() ? console.log("checkbox is checked") : console.log("checkbox is not checked")); } <input type="checkbox"> <button onclick="getX()">is the checkbox checked?</button> Alternativamente, si desea continuar usándolo con isChecked y no isChecked() , y desea poder configurarlo manualmente con esa variable, puede usar getters y setters como este:
var x = { get isChecked() { return document.querySelector("input").checked; }, set isChecked(checked) { return document.querySelector("input").checked = checked; } }; function getX() { (x.isChecked ? console.log("checkbox is checked") : console.log("checkbox is not checked")); } <input type="checkbox"> <button onclick="getX()">is the checkbox checked?</button> <button onclick="x.isChecked = false">uncheck</button> <button onclick="x.isChecked = true">check</button>