jquery - 按住 Shift 键单击 bootstrap/FlatUI 复选框

Question

当用户从一个复选框切换到另一个复选框以选择多个复选框时，我有一个简洁的脚本来处理。

var last_clicked = null;
$("table.multi-select").on("click", "input:checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table"); 

    if (!last_clicked)
        last_clicked = this; 

    if (event.shiftKey) {
        var start = grid.find("tbody input:checkbox").index(this);
        var end = grid.find("tbody input:checkbox").index(last_clicked);
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            grid.find("tbody input:checkbox")[i].checked = last_clicked.checked;
        }
    }

    last_clicked = this;
});

效果很好。我现在正在用风格化的 bootstrap/FlatUI 的复选框替换我的复选框。这些隐藏实际的复选框并将其替换为样式标签。我相应地修改了我的 Shift 点击脚本

$("table.multi-select").on("click", "label.checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table");

    if (!last_clicked)
        last_clicked = this;

    if (event.shiftKey) {
        var start = grid.find("tbody label.checkbox").index(this);
        var end = grid.find("tbody label.checkbox").index(last_clicked);
        // find checked state of last clicked 
        var checked_last = $(last_clicked).hasClass("checked"); 
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            // don't check 'this', because flatUI will toggle it when we're done
            if(i != start) 
                $(grid.find("tbody label.checkbox input:checkbox")[i]).checkbox(checked_last ? "check" : "uncheck");
        }            
    }

    last_clicked = this;
});

这也有效。问题是，它还选择了页面上复选框之间的所有文本!我该如何阻止这种情况发生？

Answer 1

在处理 Shift 键的逻辑中，您可以随后使用此问题的答案取消选择文本:

Clear a selection in Firefox