剑道网格和复选框 - 为给定列选择全部，为给定行的单元格选择“选择所有上一个”/“取消选择之后的所有”

这个问题的背景集中在一个网格上，展示了工作项任务的进度。每行表示一个工作项，该工作项遵循一组步骤模式，其中一些步骤按工作项执行，或同时对所有工作项执行。

简介是，在标题中为同时对所有工作项执行的每个步骤提供一个复选框，选中此复选框时，将选中该列中的所有复选框。

此外(我知道这可能是一个单独的问题，但我包括这个，因为它是我遇到的同一问题的一部分(，每当选中一行中的复选框时，该行中的所有先前复选框也会被选中。它还表明，如果无意中选中了特定复选框之后的任何复选框，则取消选中它们，但我认为这将是对行单元格复选框的"选择"代码的一个小补充。

我的理解是在列标题复选框中有一个"单击"事件，以触发循环访问行并选择/取消选择该列中的复选框的函数。这些复选框依次具有 onclick 和"onchange"(因为复选框实际上并没有被"单击"？(事件，这些事件选择该复选框之前的所有复选框，并沿行进一步取消选中这些复选框。

有关呈现表和一些伪代码的示例代码，请参见下文;该示例使用静态数据作为客户端的概念证明，但最终将与 SQL DB 交互。我很高兴看到一个回答这个问题任何方面的问题，但坦率地说，可能回答这些问题的问题对我来说不是很清楚，或者更好地服务于不同的 UI/语言。

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource:
        {
            transport:
            {
                read:  {
                    url: "<?= $site_url ?>asset/data/production_progress.json",
                    type: "GET",
                    dataType: "json"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                    else
                    {
                        return "";
                    }
                }
            },
            schema:
            {
                model:
                {
                    id:"Item",
                    fields:
                    {
                        Item: { editable: false },
                        Step1: { type:"boolean", editable: true },
                        Step2: { type:"boolean", editable: true },
                        Step3: { type:"boolean", editable: true },
                        Step4: { type:"boolean", editable: true },
                        Step5: { type:"boolean", editable: true }
                    }
                }
            }
        },
        scrollable: false,
        pageable: false,
        columns: [
            { field: "Item" },
            { field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>' },
            { field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>' },
            { field: "Step3", attributes: {style: "text-align: center"}, template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: 'Step 3<input type="checkbox" name="step3SelectAll"></input>' },
            { field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>' },
            { field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>' }
        ],
        editable: "inline"
    });
    $("#step3SelectAll").change(function(){
        if ($('#step3SelectAll').is(':checked')) {
            $('.Step3').prop('checked', true);
        }
        else
        {
            $('.Step3').prop('checked', false);
        }
    });
    // Start of pseudo-code
    $("#grid.row.Step3").change(function() {
        // Get dataSource from Grid
        // Not sure how this is done, examples seen have separate dataSources which is against coding requirements
        // Set all row cells prior to Step 3 as Selected
        dataSource.row.Step1.value = "true";
        dataSource.row.Step2.value = "true";
        // Set all tor cells after to Step 3
        dataSource.row.Step4.value = "false";
        dataSource.row.Step5.value = "false";
    });
});

编辑：弄清楚如何通过将列的(在本例中为步骤3(模板复选框设置为具有类(在本例中为"Step3"(并添加额外的"$("#step3SelectAll"(.change"功能来选择/取消选择整个列。现在查看仅行复选框更改。