select/deselect all checkbox highlight ok but checking wrong, across multiple tables

Question

I have three tables, one listing contacts, the other users, and the last emails. The user can either select people individually, or click on a select all checkbox. When a person is selected the <TR> is highlighted, and if select all is check, then all users are highlighted. So far, so good.

The problem arises when checking the select all checkbox. This will select all <TR> in the <TABLE> and highlight them. However, it will also select/deselect all other <TR> in the other two tables.

Summarizing, individual selections within each <TABLE> work well. Select/deselect all does check all <TR> in the table and highlights them, however it also checks <TR> in other tables, which is the problem I am trying to solve.

A nice, but not necessarily need to have, would be to use only one function which suits the 3 tables rather than 3 functions.

To get the whole picture: http://jsfiddle.net/moodas/C3dhm/8/

jQuery below:

    $(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

You could do something like this:

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

On a side note, you are using live quite a bit, are all of these tables built dynamically?

Also looking at your example I think this can be simplified to the following this relies on a convention for your tables by class name and removes the need for an 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);
    }
});

Here is an example of this on jsfiddle.