使用 Knockout JS 的数据绑定复选框答案

【问题标题】：Data - binding check boxes using Knockout JS使用 Knockout JS 的数据绑定复选框
【发布时间】：2015-02-09 15:55:18
【问题描述】：

我有一个 HTML 表格，其中有一列用于检查行（单元格中有一个复选框）。

我正在使用敲除将选中的复选框绑定到具有属性 ID 的可观察数组，如下所示。（这在没有 "checked" 的情况下可以正常工作）

NListTable 是来自 getJson 的可观察数组（在返回时填充表）。我希望能够在填充表后发布选定的 ID。

 <thead>
                        <tr>
                            <th style=" text-align:center"><b>Generate Notice</b><input type="checkbox" data-bind="checked: SelectAll" /></th>
                            <th style=" text-align:center"><b>Name</b></th>
                            <th style=" text-align:center"><b>Application Number</b></th>
                            <th style=" text-align:center"><b>Right ID</b></th>
                       <th style=" text-align:center"><b> Division</b></th>
                        <th style=" text-align:center"><b>Use ID</b></th>
  </tr>
                    </thead>



      <tbody data-bind="foreach:NListTable">
                    <tr>

                        <td style=" text-align:center">

                            <input type="checkbox" data-bind="checked: Selected">
                        </td>
                        <td style=" text-align:center">
                            <p data-bind="text:Name"></p>
                        </td>
                        <td style=" text-align:center">
                            <p data-bind="text:AppNum"></p>
                        </td>
                        <td style=" text-align:center">
                            <p data-bind="text:ID"></p>
                        </td>
                        <td style=" text-align:center">
                            <p data-bind="text:DivName"></p>
                        </td>
                        <td style=" text-align:center">
                            <p data-bind="text:useID"></p>
                        </td>
   </tr>
                    </tbody>

function RowData(Name, AppNum, ID, DivName, useID) {
    var self = this;

    self.Selected = ko.observable(true);
    self.Name = ko.observable(Name);
    self.AppNum = ko.observable(AppNum);
    self.ID = ko.observable(ID);
    self.DivName = ko.observable(DivName);
    self.useID = ko.observable(useID);

}

self.NListTable = ko.observableArray([new RowData()]);
//self.selectedThings = ko.observableArray([]);

self.SelectAll = ko.computed({
    read: function () {
        var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
            return !item.Selected();
        });
        return item == null;
    },
    write: function (value) {
        ko.utils.arrayForEach(self.NListTable(), function (rowData) {
            rowData.Selected(value);
        });
    }
});

获取JSON

 function (data) {

                $("#nListTable").show();
                for (var i = 0; i < data.length; i++) {
                    if (data[i] != null) {
                        self.NListTable.push(RowData(data[i].FirstName + ' ' + data[i].LastName, data[i].AppPre + '-' + data[i].AppNum, data[i].ID, data[i].DivName, data[i].useID));
                    }
                }

            });

我试图在页面加载时使用 HTML 属性 "checked" 选择所有复选框，但这不起作用，即使我使用此属性，我的所有复选框都未选中。

如何预先选中所有复选框

【问题讨论】：

你告诉我们“这很好用”，但看看你的视图代码我会怀疑。您能否更新您的问题并包含您的场景的实际重现？最好使用 Stack Snippet（参见编辑器工具栏）来制作实际可运行的重现。
你应该计算checkAll/Uncheck 对吗？因此，如果您尝试在 Load 上检查所有内容，则将 true 分配给该可观察对象，该可观察对象又检查所有链接到计算对象。我猜这里。如果您正在寻找不同的东西，请提供更多信息
这件小提琴可能会有所帮助尝试一下jsfiddle.net/supercool/AneL9/106
你能添加视图的部分吗
您可以在此处看到加载时所有复选框都已选中。他们不是吗？在这里叉你的小提琴jsfiddle.net/supercool/anel9/110。如果您正在寻找其他东西，请在此处解释我们 w.r.t fiddle。欢呼

标签： html data-binding knockout.js

【解决方案1】：

你应该做这样的事情

查看模型：

self.SelectAll = ko.computed({
    read: function () {
        var item = ko.utils.arrayFirst(self.NListTable(), function (item) {
            return !item.Selected();
        });
        return item == null;
    },
    write: function (value) {
        ko.utils.arrayForEach(self.NListTable(), function (rowData) {
            rowData.Selected(value);
        });
    }
});

工作小提琴here

【讨论】：