背景：

该表存在一个复选框列。作为标题行的一部分，有一个名为＆＃34; Select All＆＃34;的复选框。这并不完美。您可以按它，它将选择所有，但它将＆＃34;排序＆＃34;一些项目（无缘无故），完成后框将取消选中。这让事情变得困难。代码片段：

<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 = $（＆＃39; #checkableGrid＆＃39;）不是有效的定义或无声的失败。

结论

我想我理解这个问题，但不知道如何整理解决方案。在可排序的标题中放置一个复选框可能不是最好的方法，但这是我继承的负担。

更新1

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

更新2

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

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

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

Answer 1

希望它有所帮助...

<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>

Answer 2

尝试以下代码。这是Check for Checking复选框和所有Checkbox。将模式用于单个复选框=＆gt; “chkSelect -'AnySignificantName'”和所有复选框=＆gt; “chkSelect -'AnySignificantName'- all”来利用这种逻辑。

例如，使用类“cheSelect-Grid-All”为标题的复选框“cbSelectAll1”，为表体行使用“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);
                }
            }
        }
    }
});

正确选择网格标题

背景：

攻击解决方案

结论

更新1

更新2

2 个答案: