Question

我试图监控＆＃34;已检查＆＃34; mousedown（）和mouseup（）上的复选框的属性，但似乎有问题。 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

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

离。未选中框，然后单击

鼠标按下 - this.checked为false

鼠标向上 - this.checked仍然是假的，因为控件实际上没有改变。

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

Answer 2

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

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

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

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

jQuery mouseup事件没有检测到checked属性？

2 个答案: