How do I get this jQuery event delegation to behave in IE7 as it does in Chrome?

Question

I have a bunch of checkboxes, and then this "master" checkbox that will uncheck, or check them all if it is checked. Pretty common UI idea, you've probably seen it if you use GMail, or, you know, computers.

Each checkbox has an event that fires when you change it. Clicking the master checkbox will cause it to be fired on only the checkboxes that need to be changed.

In Chrome it works, in IE7 it doesn't. That is, in Chrome clicking the master checkbox will aggregate clicks to the other boxes that need to be clicked, and their "onChange" events will fire. In IE7 the clicks seem to aggregate, but the onChange events aren't firing.

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

And obligatory jsfiddle: http://jsfiddle.net/hzcAF/

I'm pretty stumped. ​

Answer 1

Seems like you will need to fire the change event manually, then. This should work both in IE and Chrome:

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

(Demo at jsfiddle.net)