在jQuery中,为什么在单击未选中复选框的触发器后,事件处理程序报告它没有被选中?

btxsgosb  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(144)

我可以将这种行为简化为最简单的情况(在最新的Chrome、Safari、Firefox、IE 9和10中测试(jsfiddle在IE 8上不起作用)):
http://jsfiddle.net/fjvqa/1

$("input").click(function (evt) {
    console.log("click event handler invoked", evt);
    console.log($("input").attr("checked"));
    console.log($("input").prop("checked"));
    console.log($("input").is(":checked"));
});

$("input").click();

使用HTML:

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

输出为:

undefined
false
false

那么报告未选中复选框是否正确呢?
如果它是正确的,那么为什么在jQuery 1.9.1中,行为完全相反?http://jsfiddle.net/fjvqa/2
如果它是不正确的,我想知道为什么这样一个简单的bug仍然存在于2012年11月13日发布的jQuery 1.8.3中,这仅仅是大约4个月前......对于这样一个明显的bug?
P.S.我确实理解(1)不应该使用attr(),而应该使用prop()。我将其打印出来只是为了看看发生了什么。(2)如果使用jQuery 1.8.3,change处理程序实际上会报告与click相反的结果:http://jsfiddle.net/fjvqa/3(如果是jQuery 1.9.1),它们会报告相同的内容:http://jsfiddle.net/fjvqa/4我要找的是什么是应该发生的事情的真实的情况。

mwkjh3gx

mwkjh3gx1#

评论已经给了你答案--点击后发生改变。你绑定到了一个使改变发生的事件。我猜你看到了版本之间的差异,因为没有明确的定义。解决方案是使用.change而不是.click:
更新的小提琴:
http://jsfiddle.net/fjvqa/22/

$("input").change(function (evt) {
    console.log("click event handler invoked", evt);
    console.log($("input").attr("checked"));
    console.log($("input").prop("checked"));
    console.log($("input").is(":checked"));
});

$("input").click();

输出:

checked
true
true

相关问题