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

Data - binding check boxes using Knockout JS

我有一个 HTML table,其中有一列用于检查行(在单元格中有一个复选框)。

我正在使用 knockout 将 selected 复选框绑定到一个具有属性 ID 的可观察数组,如下所示。(没有 "checked"[=31 也能正常工作=])

NListTable 是来自 getJson 的可观察数组(它填充 return 上的 table)。我希望能够在填充 table 后 post selected 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>

JS

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);
        });
    }
});

getJSON

 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" 在页面加载时 select 所有复选框,但这不起作用即使我使用它,我所有的复选框都未选中。

如何预先select所有复选框

嗯,你应该这样做

查看模型:

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);
        });
    }
});

工作fiddlehere