jQuery mouseup 事件没有检测到选中的属性？

Question

我正在尝试监视 mousedown() 和 mouseup() 上复选框的 "checked" 属性的任何更改，但似乎有问题。 mousedown 事件正在注册复选框的正确状态（选中或未选中），但 mouseup 事件正在反向注册这些状态。

如果复选框在 mouseup 上被选中，则 mouseup 事件表明它未被选中，如果复选框在 mouseup 上未被选中，则该事件表明它已被选中。知道这里发生了什么吗？

这是相关代码：

$('.input-wrapper input[type=checkbox]').mousedown(function() {

    console.log('===== MOUSEDOWN =====');

    if (this.checked) {
        console.log('The checkbox already had the "checked" attribute on mousedown');
    }
    if (!this.checked) {
        console.log('The checkbox did NOT have the "checked" attribute on mousedown');
    }

    console.log('\n\n');

}).mouseup(function() {

    console.log('===== MOUSEUP =====');

    if (this.checked) {
        console.log('The checkbox was assigned the "checked" attribute on mouseup');
    }
    if (!this.checked) {
        console.log('The checkbox\'s "checked" attribute was removed on mouseup');
    }

    console.log('\n\n');

});

...

我还在 jsFiddle 上设置了一个演示，here。

Answer 1

jQuery 提供了一个非常有趣的方法，称为 .change，每次选中或取消选中复选框时都会触发。

$('.input-wrapper input[type=checkbox]').change(function() {

    if (this.checked) {
        // do this
    } else {
        // do that
    }
});

参见 JSFiddle：http://jsfiddle.net/ayj1o9dc/3/

Answer 2

问题是鼠标弹起在控件实际更改之前运行。

例如。框未选中然后单击

鼠标按下 - this.checked 为假

mouse up - this.checked 仍然是 false，因为控件实际上并没有改变。

this.checked 直到鼠标松开运行后才会更新。

jQuery mouseup 事件没有检测到选中的属性？

jQuery mouseup event not detecting checked attribute?

javascript

checkbox

jquery

mouseevent

checked