如何使这个jQuery事件委托在IE7中的行为与在Chrome中的行为相同？

Question

我有一堆复选框，然后是该“主”复选框，它将取消选中该复选框，或者选中所有复选框。非常常见的UI想法，如果使用GMail或计算机，您可能已经看过它。

每个复选框都有一个在您更改它时会触发的事件。单击主复选框将导致仅在需要更改的复选框上将其触发。

在Chrome浏览器中有效，在IE7中则无效。也就是说，在Chrome中，点击主复选框会将点击汇总到需要点击的其他框中，并且它们的“ onChange”事件将触发。在IE7中，点击次数似乎有所增加，但是onChange事件并未触发。

演示HTML

<ul>
  <li>
    <input id='master' type='checkbox'/>
  </li>
  <li>
        <input class='minion' type='checkbox'>
  </li>
  <li>
        <input class='minion' type='checkbox'>
  </li>
</ul>
<div id="log" style='background:#eee;cursor:pointer;'>
</div>

Demo javascript，jquery 1.7

$(function() {
    $("#log").click(function() {
        $(this).html('');
    });


    $(".minion").change(function() {
        var msg = $(this).is(":checked") ? "checked" : "unchecked";
        $("#log").append("<p> " + msg + " : " + new Date() + "</p>");
    });

    $("#master").change(function() {
        var toBeChanged = $(this).is(":checked")
            ? $(".minion").not(":checked")
            : $(".minion").filter(":checked");

        toBeChanged.click();
    });
});

和强制性的jsfiddle：http://jsfiddle.net/hzcAF/

我很沮丧。

Answer 1

似乎您需要手动触发change事件。这在IE和Chrome中都应该起作用：

$("#master").click(function() {
    $(".minion").prop("checked", this.checked).change();
});

（Demo at jsfiddle.net）

Answer 2

这里是一个很好的起点：

http://jsfiddle.net/7qn63/5/

[您可能希望对强制change()调用有更多选择。