Question

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

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

总结，每个<TABLE>中的个别选择效果很好。选择/取消选择all会检查表中的所有<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");
    }
});

在侧注释上，您正在使用相当多的动态，所有这些表都是动态构建的吗？

另外看一下你的例子，我认为这可以简化为以下内容，它依赖于类名的表约定，并且不再需要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上的示例。

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

1 个答案: