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

但是我有两个问题：

状态似乎没有视觉上的改变。
我的复选框checked属性的显示值是在切换前状态的负值，我不明白为什么（false以复选框和{{1 }}（如果不是）。

这里是fiddle。

我还尝试将事件侦听器绑定到true事件。

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

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

1 个答案: