Question

在检查CheckAll复选框时，我正在检查页面上的所有复选框，并将每个复选框的父表（即表格）移动到另一个div中。在取消选中CheckAll复选框时，我必须取消选中页面上所有选中的复选框，并从div中删除复制的表格元素。

/*******************Check and Uncheck all the checkboxes on the page***********************************/
$("#dvReports #checkAll").click(function () 
{
    var pageNum = $("#dtlRptPrvNxtLnk .selected.link_look").html();
    alert(pageNum);
    if ($("#dvReports #checkAll").is(':checked')) 
    {
        $("#dvReports input[type=checkbox]").each(function () 
        {
            $(this).prop("checked", true);
            // If a listing is selected then move it to  divPrintContainer, 
            // which is buried inside _reportLayout.cshtml
            $(this).closest('table')
                .toggleClass(pageNum)
                .clone()
                .appendTo("#divPrintContainer");
        });
    } 
    else 
    {
        $("#dvReports input[type=checkbox]").each(function () 
        {
            $(this).prop("checked", false);
        });

        $("#divPrintContainer").children('table.'+ pageNum ).remove();
    }
});

我遇到了以下问题：

对于CheckAll复选框上的每次偶数点击，.toggleClass(pageNum)都无效。即我第一次检查 Checkall .toggleClass(pageNum)时是否指定了班级名称。现在我取消选中Checkall。我再次检查 Checkall 它不会将pagenum指定为类（但我确实看到了带有pageNum的警报）。

HTML in the fiddle

Answer 1

您在toggleClass

中呼叫if ($("#dvReports #checkAll").is(':checked')) {

因此，toggleClass仅在检查时调用，而不是取消选中。因此，单击1，toggleClass添加该类。单击2，取消选中复选框，不更改班级。单击3，选中复选框，仅在第二次调用toggleClass，删除该类。

我相信你想要的是每次点击它时都要调用它，而不仅仅是在选中它时。将其从if。

中删除

Answer 2

如果我正确理解了您的问题，则问题出现在这一行：

$(this).closest('table').toggleClass(pageNum).clone().appendTo("#divPrintContainer");

我对这一行的解释如下：

向上搜索DOM树以获取对该引用的引用包含复选框
切换名为pageNum的类，即第一次添加，第二次删除等等
将表复制到新的DOM元素
将新元素附加到容器

因此，当您单击“全部检查”时，它会切换最靠近每个文本框的表格上的类，但绝不会将其切换为关闭。当您第二次选择它时，它会删除该类，然后将其复制到容器中。

只需将该行更改为以下内容：

$(this).closest('table').clone().addClass(pageNum).appendTo("#divPrintContainer");

将参数值指定为元素的类不会对偶数次点击起作用

2 个答案: