Jquery 选中/取消选中所有复选框在多个表中突出显示“确定”，但选中“错误”

我有三个表格，一个列出联系人，其他用户和最后的电子邮件。用户可以单独选择人员，也可以单击“全选”复选框。当一个人被选中时，

将突出显示，如果选中全选，则所有用户都将突出显示。到目前为止，一切顺利

选中“全选”复选框时会出现问题。这将选择

中的所有

，并突出显示它们。但是，它还将选择/取消选择其他两个表中的所有其他

总结，每个

中的单个选择都很有效。全选/取消全选会选中表中的所有

，并突出显示它们，但它也会选中其他表中的

，这正是我试图解决的问题

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

了解整体情况：

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);
}   
    });

---

你可以这样做：

$("#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);
    }
});

---

下面是一个例子。

您可以这样做：

$("#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);
    }
});

---

下面是一个例子。

其中一个表是动态的（电子邮件表），另外两个是staticMark，非常感谢！它工作得很好，很好地简化了！只是一个小问题。。父母（table.t）代表什么？嗨，马克，出于某种原因，JSFIDLE工作得很完美，但出于某种原因，它似乎并不适合我。我用整个代码制作了一个粘贴箱。。。我错过什么了吗？再次感谢

table.t

是类为

t

的父表。我将其添加到标记中，以便轻松识别父表。在列出的标记中，尝试添加

class=“t”

，看看这是否有帮助。（

t

可以是我刚才使用的任何类，为了简单起见。

t

再次您好，.t对于一个类来说是有意义的，我只是在表中没有看到它…这就是为什么它在这里对我不起作用的原因。再次感谢！！其中一个表是动态的（电子邮件表），另外两个是staticMark，非常感谢！它工作得很好，简化得很好！只是一个小问题。

parents（“table.t”）是什么

representation？你好，马克，出于某种原因，JSFIDLE工作得很好，但出于某种原因，它似乎对我不起作用。我用整个代码制作了一个粘贴箱……我遗漏了什么吗？再次感谢！

table。t

是父表，它的类为

t

。我将它添加到标记中，以便轻松识别parent表格。在列出的标记中，尝试添加

class=“t”

，看看这是否有帮助。（

t

可以是我刚才使用的任何类

t

。再次您好，.t对于一个类来说没有意义，我只是在表格中没有看到它…这就是为什么它在这里对我不起作用的原因。再次感谢！！