使用事件偵聽器更改單擊時復選框的狀態

Question

我想防止單擊復選框時的默認行為（它的新狀態取決於API響應）。

首先，我停用默認行為：

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

然后我嘗試更改自己的復選框狀態：

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

但這有兩個問題：

1. 狀態似乎在視覺上沒有改變。
2. 我的復選框的checked屬性的顯示值是在切換前狀態的負值，我不明白為什么（當我從一個復選框開始時為false ，否則為true ）。

這是一個小提琴 。

我還嘗試將事件偵聽器綁定到change事件。

Answer 1

我嘗試過的是在mousedown上更改視覺狀態，並在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);
});