0

On checking the CheckAll check box I am checking all the checkboxes on a page and moving the parent, which is a table, of each of those checked boxes into another div. And On Unchecking the CheckAll check box I have to uncheck all the checked checkboxes on the page and remove the copied table elements from the 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();
    }
});

I am running into the following issue :

  1. For every even number of clicks on the CheckAll checkbox the .toggleClass(pageNum) is not working. i.e. The first time I check the Checkall .toggleClass(pageNum) assigns the class name. Now I uncheck the Checkall. And again I check the Checkall it won't assign the pagenum as class (but I do see the alert with the pageNum).

HTML in the fiddle

4

2 回答 2

1

您正在toggleClass调用if ($("#dvReports #checkAll").is(':checked')) {

结果，toggleClass仅在检查而不是取消检查时调用。因此，单击 1，toggleClass添加类。点击2，复选框未选中，类没有变化。单击3，选中复选框，toggleClass仅第二次调用，删除类。

我相信您想要的是每次单击时都调用它，而不仅仅是在检查时调用它。将其从if.

于 2013-07-22T19:07:14.750 回答
1

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

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

我对这一行的解释如下：

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

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

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

$(this).closest('table').clone().addClass(pageNum).appendTo("#divPrintContainer");
于 2013-07-22T19:07:42.367 回答