поставьте / снимите отметку со всех флажков, выделите ОК, но отметьте неправильно, для нескольких таблиц

Question

У меня есть три таблицы: одна содержит список контактов, другие пользователи и последние электронные письма. Пользователь может выбрать людей по отдельности или установить флажок выбрать все . Когда выбран человек, подсвечивается <TR>, а если выбрано все, отметьте, все пользователи подсвечиваются. Пока все хорошо.

Проблема возникает при установке флажка выбрать все. Это выберет все <TR> в <TABLE> и выделит их. Однако он также выберет / отменит выбор всех остальных <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 немного, все ли эти таблицы построены динамически?

Также, глядя на ваш пример, я думаю, что это можно упростить до следующего, это опирается на соглашение для ваших таблиц по имени класса и устраняет необходимость в идентификаторе:

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