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

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 属性的显示值是其在切换之前状态的负值，我不明白为什么(当我从选中复选框，如果不是，则为 true)。

这是一个fiddle .

我还尝试将事件监听器绑定(bind)到 change 事件。

Answer 1

我尝试的是更改mousedown上的视觉状态并跳过click上的事件 Prop

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);
});