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

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

这里有一个工作的例子.

使用鼠标单击复选框时,会立即检查它 - 即警报显示"已选中".但是,当单击其中一个按钮(间接调用复选框上的单击方法)时,在单击代码运行之后才会单击该复选框.

要对此进行测试,请使用鼠标单击复选框几次,您将分别看到"已选中"和"未选中"警报.单击"开",您将看到警告"未选中",然后选中复选框.如果您再单击"关闭",您将看到"已选中",然后选中取消选中自己的复选框.

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

Answer 1

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