网格标题中的正确全选复选框答案

【问题标题】：A proper select all checkbox in a grid header网格标题中的正确全选复选框
【发布时间】：2018-05-22 20:30:58
【问题描述】：

我继承了一个新项目，我的 jQuery 技能非常薄弱。我正在为表格创建一个全选复选框。

背景：

该表存在一个复选框列。作为标题行的一部分，有一个名为“全选”的复选框不能完美运行。您可以按下它，它将全选，但它会“排序”一些项目（无缘无故），完成后该框将自行取消选中。这使事情变得困难。代码片段：

<thead class="KoTableTH">
    <tr data-bind="click: sort">
        <th>
            <input type="checkbox" id="cbSelectAll1" />Select All
        </th>
        <th id="FirstName">First Name</th>
        <th id="LastName">Last Name</th>
        <th id="PhoneNumber">PhoneNumber</th>
    </tr>
</thead>

还有一个 jQuery 剪辑：

$("[id*=cbSelectAll1]").live("click", function () {
    var grid = $(this).closest("table");
    $("input:checkbox", grid).each(function () {
        if (chkHeader.is(":checked")) {
            $(this).attr("checked", "checked");
            $("td", $(this).closest("tr")).addClass("selected");
        } else {
            $(this).removeAttr("checked");
            $("td", $(this).closest("tr")).removeClass("selected");
        }
    });
});

攻击解决方案

所以我的第一个想法是在最后以某种方式锁定检查状态无济于事。然后我从“全选”中删除了数据绑定以获得咯咯笑声，但它仍然没有粘住。因此，未绑定的复选框不会保持选中状态。然后我继续尝试从表中删除复选框，但我无法弄清楚如何正确定义上面的 var 网格，因为 var grid = $('#checkableGrid') 不是有效的定义或失败的东西默默地。

结论

我想我了解问题，但不知道如何组合解决方案。将复选框放在可排序的标题中可能不是最好的处理方式，但这是我继承的负担。

更新 1

在演示一些想法时，我遇到了全选复选框有效的问题，但如果我在任何时候通过另一列对列表进行排序，它会取消选中其中一些。有没有办法将列设置为不排序？我知道这可以使用 ASP 表单，但不知道它是如何在这里完成的。我认为这将解决这两个问题。

更新 2

我们想出了一个权宜之计的解决方案，它会等待 100 个周期，然后修复复选框。

if (chkHeader.is(":checked")) {
    count = count - 1;
    setTimeout(function () {
        $('#cbSelectAll1').prop('checked', true);
    }, 100);
} else {
    setTimeout(function () {
        $('#cbSelectAll1').prop('checked', false);
    }, 100);
}

虽然不是一个理想的解决方案，但它正在发挥作用。

【问题讨论】：

你用的是什么版本的jQuery？
jQuery: 1.7.1。淘汰赛也在这里，但我认为它没有被使用。

标签： javascript jquery html checkbox

【解决方案1】：

试试下面的代码。这是检查复选框和所有复选框的逻辑。对单个复选框 => "chkSelect-'AnySignificantName'" 和所有复选框 => "chkSelect-'AnySignificantName'-all" 的类使用模式来利用此逻辑。

例如，对标题的复选框“cbSelectAll1”使用类“cheSelect-Grid-All”，对表体行使用“cheSelect-Grid”类。

$("body").on("click", "input[type='checkbox'][class*='chkSelect-']", function () {
    var classes = $(this).attr('class').split(' ');
    var selfClassname = '', type = 'single', singleClassName = '', allClassName = '';
    if (classes.length > 0) {
        classes.forEach(function (a) {
            if (a.indexOf('chkSelect-') > -1) {
                selfClassname = a;
                return;
            }
        });
    }
    if (selfClassname !== '') {
        if ((selfClassname.match(/-/g) || []).length === 2) {
            type = 'all';
            allClassName = selfClassname;
            singleClassName = allClassName.replace("-All", "");
        }
        else {
            singleClassName = selfClassname;
            allClassName = singleClassName + "-All";
        }
        if (singleClassName !== '' && allClassName !== '') {
            if (type === "all") {
                $("." + singleClassName).prop("checked", $(this).is(":checked"));
            }
            else {
                if ($(this).is(":checked") && $("." + singleClassName).length === $("." + singleClassName + ":checked").length) {
                    $("." + allClassName).prop("checked", true);
                }
                else {
                    $("." + allClassName).prop("checked", false);
                }
            }
        }
    }
});

【讨论】：

【解决方案2】：

希望对你有帮助...

<html>
    <head>
        <title>test</title>
        <meta charset="UTF-8">

    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            for(idx=0; idx<8; idx++)
                {
                    $(".KoTableTH").append('<tr data-bind="click: sort">'
                        + '<td><input type="checkbox" class="cbSelectAll" />Item:'
                        + '</td><td>Name '+idx+'</td><td>Last Name '+idx+'</td>'
                        + '<td>PhoneNumber</td></tr>');
                }
            $("#cbSelectAll1").click(function () {
                if($("#cbSelectAll1").prop("checked") == false)
                    {
                        $(".cbSelectAll").prop("checked", false);
                    }
                else 
                {
                    $(".cbSelectAll").prop("checked", true);    
                }
            });
        });         
        </script>
        <table class="KoTableTH">
            <tr data-bind="click: sort">
                <th>
                    <input type="checkbox" id="cbSelectAll1" />Select All
                </th>
                <th id="FirstName">First Name</th>
                <th id="LastName">Last Name</th>
                <th id="PhoneNumber">PhoneNumber</th>
            </tr>
        </table>
    </body>
</html>

【讨论】：

当我们尝试它最终无法正常工作时，因为排序发生在之后并重置它。我在原帖中贴出了权宜之计，供大家查看。