0

我有一堆复选框，然后这个“主”复选框将取消选中，或者如果选中则将它们全部选中。很常见的 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>

演示 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/

我很困惑。​</p>

4

2 回答 2

2

那么，您似乎需要change手动触发该事件。这应该适用于 IE 和 Chrome：

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

（在 jsfiddle.net 上的演示）

于 2012-08-20T21:58:00.403 回答
1

这是一个很好的起点：

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

您可能希望对强制change()调用更具选择性。

于 2012-08-20T22:00:40.587 回答