1

このjsFiddleには、最初の列にチェックボックスがあるテーブルがあります。テーブル ヘッダーのマスター チェックボックスは期待どおりに機能し、クリックするとテーブル内のすべてのチェックボックスの状態が切り替わります。

Shift+のホットキーを設定してX、マスター チェックボックスを切り替えます。ホットキーを使用した場合の望ましい動作は次のとおりです。

  1. マスターチェックボックスが切り替えられます
  2. 子チェックボックスはそれぞれ、マスターと一致するようにチェック状態が設定されています

しかし、実際に起こっていることは逆です...

  1. 子チェックボックスはそれぞれ、マスターと一致するようにチェック状態が設定されています
  2. マスターチェックボックスが切り替えられます

ここに関連するコードがあります

$(".master-select").click(function(){
    $(this).closest("table").find("tbody .row-select").prop('checked', this.checked);
});

function tickAllCheckboxes() {
  var master = $(".master-select").click();
}

//using jquery.hotkeys.js to assign hotkey
$(document).bind('keydown', 'shift+x', tickAllCheckboxes);

これにより、マスター チェックボックスとは逆のチェック状態の子チェックボックスが作成されます。なぜそれが起こっているのですか？修正があればいいのですが、何が起こっているのかを理解できるように、私は本当に説明を求めています。

4

1 に答える 1

1

これを試して

$(".master-select").click(function(){
    var checked = true;
    if(this.checked){
        checked = false;
    }
    $(this).closest("table").find("tbody .row-select").prop('checked', checked);
});

問題は、あなたが実際にはそうではないということclicking the checkboxですtriggering it。SOチェックボックスの状態は、トリガーした場所で前の状態になります..

トリガーのロジックと手動クリックを明示的に処理する必要があります..

このコードを試してください

$(".master-select").click(function(e) {
    var checked;
    if (e.isTrigger) { // Logic when click is triggered
        checked = true;
        if (this.checked) {
            checked = false;
        }
    }
    else {  // Explicit click 
       checked = this.checked;
    }

    $(this).closest("table").find("tbody .row-select").prop('checked', checked);
});

フィドルをチェック

于 2012-12-11T16:46:39.877 に答える