Question

这是我的HTML：

<input class='user_roles' id="chk" type=checkbox /> <input id="btn_on" type="button" value="on" /> <input id="btn_off" type="button" value="off" />

我的jQuery：

$('#chk').click(function() {
    if($(this).prop("checked") === true) {
        alert ("checked");   
    }
    else{
        alert ("not checked");
    } 
});

$("[id$=btn_on]").click(function () {
    $('#chk').click();
});

$("[id$=btn_off]").click(function () {
    $('#chk').click();
});

一个工作示例是here。

当使用鼠标单击复选框时，会立即检查它 - 即警报显示“已选中”。但是，当单击其中一个按钮（间接调用复选框上的单击方法）时，在点击代码运行之后

之前，不会单击该复选框。

要测试此项，请使用鼠标单击复选框几次，您将分别看到“已选中”和“未选中”警报。单击“开”，您将看到警告“未选中”，然后选中复选框。如果您再单击“关闭”，您将看到“已选中”，然后选中取消选中自己的复选框。

这种行为的原因是什么？在按照鼠标行为调用单击侦听器代码之前，如何确保复选框“检查”发生？

Answer 1

如果它只是一个关于让它工作的问题，请在复选框中使用.change()而不是.click()，如果它关于它为什么会这样做我不知道抱歉

Answer 2

尝试使用setTimeout，稍等一会然后再检查一下。问题是事件触发的速度比复选框更快，原因不明。

Working fiddle

$('#chk').click(function() {
    var $this = $(this);
    setTimeout(function() {
        if ($this.prop("checked") === true) {
            alert("checked");
        }
        else {
            alert("not checked");
        }
    }, 10);
});

$("[id$=btn_on]").click(function() {
    $('#chk').click();
});

$("[id$=btn_off]").click(function() {
    $('#chk').click();
});

Answer 3

使用onchange事件而不是onclick：

http://jsfiddle.net/FCrSg/8/

在更改框的值之前单击框时会触发onclick事件。

工作流程如下：你点击你的鼠标=＆gt; OnClick事件被触发=＆gt;复选框勾选=＆gt; OnChange事件被触发

Answer 4

实际点击该复选框会导致在触发click事件之前检查它。使用jquery单击它会先运行事件代码。相反，使用更改事件将为您提供所需的结果。

见下面的工作示例。

http://jsfiddle.net/FCrSg/3/

Answer 5

在我看来，解释是这是浏览器处理复选框点击的方式中的错误：

在调用自定义事件处理程序之后，应该发生默认行为。所以当你点击按钮时看到的实际上是正确的行为。有趣的行为是，当您单击该框时，会在运行自定义事件处理程序之前检查它。

要了解它有多奇怪，您可以从事件处理程序中return false;。这应该可以防止默认行为。您将看到的是，单击它时实际上会检查该框 - 然后在事件处理程序返回后取消选中该框！

顺便说一句，我使用的是Firefox 4.我不知道在其他浏览器中是什么样的。它似乎与jQuery无关，因为在没有它的情况下做任何事情我都能看到同样有趣的行为。

Answer 6

我发现这个answer on Stack Overflow手动创建一个事件并发送它。

您可以将其置于一个函数中并通过点击事件调用它：

function simulateClick(target)
{
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    target.dispatchEvent(e);
}

$("[id$=btn_on]").bind("click", function() {
    simulateClick($('#chk')[0]);
});

$("[id$=btn_off]").click(function() {
    simulateClick($('#chk')[0]);
});

在此处试试：http://jsfiddle.net/FCrSg/10/

几乎与MDN上的内容相同：https://developer.mozilla.org/en/DOM/dispatchEvent_example

Answer 7

你可以这样做：

function alertState(el){
   if(el.prop("checked") === true) {
        alert ("checked");   
    }
    else{
        alert ("not checked");
    }
}
$('#chk').click(function() {
    alertState($(this));
});
    $("[id$=btn_on]").click(function () {
        $('#chk').prop('checked', true);
        alertState($('#chk'));
    });

    $("[id$=btn_off]").click(function () {
            $('#chk').removeProp('checked');
        alertState($('#chk'));
    });

在这里摆弄http://jsfiddle.net/FCrSg/9/

我如何理解这个复选框行为？

7 个答案: