jQuery - 使用keydown（取消）选中复选框的问题答案

【问题标题】：jQuery - problems with (un)checking checkbox using keydownjQuery - 使用keydown（取消）选中复选框的问题
【发布时间】：2013-11-08 17:55:56
【问题描述】：

我在（取消）使用 keydown 选中复选框并将其与鼠标单击组合时遇到问题。我有一个 id 为“check”的复选框，这是我的 jQuery 代码的一部分，通过点击空格键来检查和取消选中我的复选框：

$(document).keydown(function (e) {
    if (e.keyCode == 32) {
        if ($("#check").is(":checked")) {
            $("#check").prop("checked", false);
        }
        else {
            $("#check").prop("checked", true);
        }
    }
});

加载文档时一切正常。但是，当我仅通过经典鼠标单击选中或取消选中复选框时，我不能再使用空格键进行（取消）检查。每次我点击空格键（在我已经点击复选框之后）复选框都会快速检查和取消选中。例如，当它被选中并且它处于这种损坏状态时，点击空格键只会导致复选框被再次选中。

感谢您提出如何防止这种不良行为的每一个想法。

【问题讨论】：

标签： jquery html

【解决方案1】：

您可以使用event.stopImmediatePropagation

阻止其余的处理程序被执行并防止 DOM 树冒泡的事件。

还要添加这一行以获得跨浏览器支持

event = e || window.event;

DEMO

$(document).keydown(function (e) {
    event = e || window.event;
    event.stopImmediatePropagation();

    if (event.keyCode == 32) {
        if ($("#check").is(":checked")) {
            $("#check").prop("checked", false);
        }
        else {
            $("#check").prop("checked", true);
        }
    }
});

【讨论】：

没问题，很高兴为您提供帮助！

【解决方案2】：

使用.removeAttr("checked") 取消选中并使用.attr("checked","checked") 选中复选框希望这会奏效

【讨论】：

不，他不应该使用attr('checked', 'checked')，因为属性和属性之间存在差异。查看文档api.jquery.com/prop

【解决方案3】：

您的问题与jQuery difference between change and click event of checkbox 类似。您需要使用点击处理程序，而不是 keydown 来捕获键盘事件

【讨论】：