使用事件侦听器更改单击时复选框的状态

Question

I'd like to prevent the default behaviour when clicking on a checkbox (its new state will depend on an API response).

First I deactivate the default behaviour :

cb.addEventListener("click", function(e){
    e.preventDefault();
    e.stopPropagation();
}

Then I try to change myself the state of the checkbox :

cb.addEventListener("click", function(e){
    e.preventDefault();
    e.stopPropagation();
    console.log("Before : " + this.checked);
    this.checked = !this.checked;
    console.log("After : " + this.checked);
}

-> // If I start with a checked checkbox :
-> Before : false
-> After : true

-> // If I start with an unchecked checkbox :
-> Before : true
-> After : false

But with this I have two problems :

1. the state doesn't seem to change visually.
2. The displayed value for my checkbox's checked attribute is the negative value of it's state right before toggling it and I don't understand why ( false when I start with a checked checkbox and true if it's not).

Here is a fiddle .

I also tried to bind the event listener to the change event.

Answer 1

What I have tried is changed visual state on mousedown and skipped event prop on click

var cb = document.getElementById("checkbox");
cb.addEventListener("click", function(e) {       
    e.preventDefault();
});
cb.addEventListener("mousedown", function(e){
    e.preventDefault();
    e.stopPropagation();
    console.log("Before : " + this.checked, e.target.checked);
    e.target.checked = !this.checked;
    console.log("After : " + this.checked);
});