jQuery .find() - 标签选择器单击事件与复选框更改事件不一致 IE8

Question

我有两个事件：

$(document).on('change','#trackAll',function() {
    $('#tblTrackPlanFood')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);
});
$(document).on('click','#trackAllLbl',function() {
    $('#tblTrackPlanFood')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);
});

第一个"更改"事件是一个复选框 （#trackAll）。它在IE8中工作正常。"#tblTrackPlanFood"表中的复选框按预期选中/取消选中。

但是，第二个事件"点击"#trackAllLbl"位于标签上。在IE8中它不起作用。我可以插入一个 alert（） 并确认选择器工作正常，但是单击标签时相同的"#tblTrackPlanFood"复选框代码不起作用。

知道为什么会发生这种情况吗？

Answer 1

问题是 .prop（'checked'， this.checked）;

这是指标签，而不是复选框。 请改为执行以下操作：

$(document).on('click','#trackAllLbl',function() {
    $('#tblTrackPlanFood')
        .find("input[type='checkbox']")
        .prop('checked', $("#trackAll").is(":checked"));
});

Answer 2

代码中的问题是，在第二个函数中，this不是复选框，而是标签。

你需要这样的东西：

.prop('checked', document.getElementById('trackAll').checked);