选择/取消选择所有复选框突出显示确定但检查错误，跨多个表

Question

我有三张表，一张列出联系人、其他用户和最后一封电子邮件。用户可以单独选择人员，也可以单击全选复选框。当一个人被选中时，<TR> 会突出显示，如果选中全选，则所有用户都会突出显示。到目前为止，一切顺利。

选中全选复选框时会出现问题。这将选择<TABLE> 中的所有<TR> 并突出显示它们。但是，它也会选择/取消选择其他两个表中的所有其他 <TR>。

总结，每个 <TABLE> 中的单独选择效果很好。全选/取消全选会检查表中的所有<TR> 并突出显示它们，但它也会检查其他表中的<TR>，这是我要解决的问题。

一个不错但不一定需要的方法是只使用一个适合 3 个表而不是 3 个函数的函数。

全面了解： http://jsfiddle.net/moodas/C3dhm/8/

下面的jQuery：

    $(document).ready(function() {
    // CONTACTS 
    $("#checkallContacts").live('click',function(event) {
    $('input:checkbox:not(#checkallContacts)').attr('checked',this.checked);
    //To Highlight
    if ($(this).attr("checked") == true) {
        $("#tblDisplayContacts").find('tr:not(#chkrowContacts)').css("background-color","#FC9A01"); }
    else {
        $("#tblDisplayContacts").find('tr:not(#chkrowContacts)').css("background-color","#FFF"); }
});

$('input:checkbox:not(#checkallContacts)').live('click',function(event) {
    if($("#checkallContacts").attr('checked') == true && this.checked == false) {
        $("#checkallContacts").attr('checked',false);
        $(this).closest('tr').css("background-color","#ffffff"); }
    if(this.checked == true) {
        $(this).closest('tr').css("background-color","#FC9A01");
        CheckSelectAll(); }
    if(this.checked == false) {
        $(this).closest('tr').css("background-color","#ffffff"); }
});

function CheckSelectAll() {
    var flag = true;
    $('input:checkbox:not(#checkallContacts)').each(function() {
        if(this.checked == false) {
            flag = false; }
    });
    $("#checkallContacts").attr('checked',flag);
}

// USERS    
$("#checkallUsers").live('click',function(event) {
    $('input:checkbox:not(#checkallUsers)').attr('checked',this.checked);
    //To Highlight
    if ($(this).attr("checked") == true) {
        $("#tblDisplayUsers").find('tr:not(#chkrowUsers)').css("background-color","#FC9A01"); }
    else {
        $("#tblDisplayUsers").find('tr:not(#chkrowUsers)').css("background-color","#FFF"); }
});

$('input:checkbox:not(#checkallUsers)').live('click',function(event) {
    if($("#checkallUsers").attr('checked') == true && this.checked == false) {
        $("#checkallUsers").attr('checked',false);
        $(this).closest('tr').css("background-color","#ffffff"); }
    if(this.checked == true) {
        $(this).closest('tr').css("background-color","#FC9A01");
        CheckSelectAll(); }
    if(this.checked == false) {
        $(this).closest('tr').css("background-color","#ffffff"); }
});

function CheckSelectAll() {
    var flag = true;
    $('input:checkbox:not(#checkallUsers)').each(function() {
        if(this.checked == false) {
            flag = false; }
    });
    $("#checkallUsers").attr('checked',flag);
}

// EMAIL    
$("#checkallEmail").live('click',function(event) {
    $('input:checkbox:not(#checkallEmail)').attr('checked',this.checked);
    //To Highlight
    if ($(this).attr("checked") == true) {
        $("#tblDisplayEmail").find('tr:not(#chkrowEmail)').css("background-color","#FC9A01"); }
    else {
        $("#tblDisplayEmail").find('tr:not(#chkrowEmail)').css("background-color","#FFF"); }
});

$('input:checkbox:not(#checkallEmail)').live('click',function(event) {
    if($("#checkallEmail").attr('checked') == true && this.checked == false) {
        $("#checkallEmail").attr('checked',false);
        $(this).closest('tr').css("background-color","#ffffff"); }
 if(this.checked == true) {
        $(this).closest('tr').css("background-color","#FC9A01");
        CheckSelectAll(); }
    if(this.checked == false) {
        $(this).closest('tr').css("background-color","#ffffff"); }
});

function CheckSelectAll() {
    var flag = true;
    $('input:checkbox:not(#checkallEmail)').each(function() {
        if(this.checked == false) {
            flag = false; }
    });
    $("#checkallEmail").attr('checked',flag);
}   
    });

Answer 1

你可以这样做：

$("#checkallContacts").live('click', function(event) {
    $("#tblDisplayContacts").find("input[type=checkbox]").attr('checked', this.checked);
    //To Highlight
    if ($(this).attr("checked") == true) {
        $("#tblDisplayContacts").find('tr:not(#chkrowContacts)').css("background-color", "#FC9A01");
    }
    else {
        $("#tblDisplayContacts").find('tr:not(#chkrowContacts)').css("background-color", "#FFF");
    }
});

在旁注中，您使用 live 相当多，所有这些表都是动态构建的吗？

同时查看您的示例，我认为这可以简化为以下内容，这依赖于您的表按类名的约定，并且不需要 id：

$(".checkAll").live("click", function() {
    var $table = $(this).parents("table.t");
    $table.find("input[type=checkbox]").attr('checked', this.checked);
    //To Highlight
    if ($(this).attr("checked") == true) {
        $table.find('tr').css("background-color", "#FC9A01");
    }
    else {
        $table.find('tr').css("background-color", "#FFF");
    }
});

$("input[type=checkbox]:not(.checkAll)").live("click", function() {
    var $table = $(this).parents("table.t");
    var $checkAll = $table.find(".checkAll");
    var $row = $(this).parents("tr.trBorderLight");
    var totalChecked = $table.find(":checked:not(.checkAll)").length;
    var totalCheckBoxes = $table.find("input[type=checkbox]:not(.checkAll)").length;
    if ($(this).attr("checked") == true) {
        $row.css("background-color", "#FC9A01");
        if (totalChecked == totalCheckBoxes) {
            $checkAll.attr("checked", true);
            $checkAll.parents("tr.trBorder").css("background-color", "#FC9A01");
        }
    }
    else {
        $row.css("background-color", "#FFF");
        $checkAll.parents("tr.trBorder").css("background-color", "#FFF");
        $checkAll.attr("checked", false);
    }
});

这是jsfiddle 上的一个示例。