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 に答える