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。因此，无论您在何处触发复选框，复选框的状态都将处于先前的状态..

您需要明确处理触发器和手动单击的逻辑..

试试这个代码

$(".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 回答