单击复选框时为什么“event.currentTarget.checked”不正确？

Question

我们有一个骨干程序，它会监听一个复选框。当用户点击复选框时，它会触发一个功能，但问题是event.currentTarget.checked不正确。

说，有一个模板包含一个复选框：

<input type="checkbox" id="show_user" />

它与骨干视图绑定，并有这样的事件：

events: {
  "click #show_user": "toggle"
},
toggle: function(event) {
   this.model.set("show_user", event.currentTarget.checked);
}

因此，如果我点击该复选框将其选中，我希望event.currentTarget.checked为true。但是当我们在Chrome上运行karma测试（使用调试器）时，我们清楚地看到它是false！

如果我们一行一行地运行调试器，过了一会儿就会true。

为什么会出现这种行为？有没有其他稳定的方法可以获得复选框的checked状态？

---

更新：

我想我错过了一些重要信息。当我在复选框上说click时，我的意思是在茉莉花测试中，我写道：

$("#show_user").click()

在这种情况下，方法event中的toggle参数太早收到，因为复选框本身的状态尚未更改。如果我用很短的时间把它放在setTimeout，请说：

toggle: function(event) {
   setTimeout(function() {
     this.model.set("show_user", event.currentTarget.checked);
   }, 1);
}    

event.currentTarget.checked将是正确的。

现在我将其更改为change：

events: {
  "change #show_user": "toggle"
}

在我的测试中，我不会使用.click()，相反，我写道：

var checkbox = $("#show_user");
checkbox.prop("checked", !checkbox.prop("checked"));
checkbox.change();

更改复选框的状态并触发change事件。现在它运作良好！