Question

我有一个HTML表格，其中包含已选中行的列（单元格中有一个复选框）。

我正在使用knockout将选中的复选框绑定到具有属性ID的可观察数组，如下所示。（这样可以正常工作，不用“选中”）

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>

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属性“选中”来选择页面加载时的所有复选框，但这不起作用，即使我使用此选项框也未选中。

如何预选所有复选框

Answer 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

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

1 个答案: