Question

Simple example:

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

document.getElementById("cb").onclick = function(){
    if(this.checked){
        console.log("Change from checked to unchecked");
    } else {
        console.log("Change from unchecked to checked");         
    }
};

But when I run it, it give the opposite result.
And the conclusion I came up with is that the checked property change before the onclick event is fired.
So my question is: how could I fire the onclick event before the checked property change?

Answer 1

you have to use onchange event instead of onclick.

UPDATE:

your if condition is wrong, when the control is checked, you are showing Change from checked to unchecked