Data - binding check boxes using Knockout JS

Question

I have a HTML table which has a column for checked rows(which has a check box in the cell).

I am using knockout to bind the selected check boxes to an observable array with an attribute ID as shown below.(this works fine without "checked")

The NListTable is an observable array from getJson (which populate the table on return).I want to be able to post the selected IDs after the table is populated.

 
                        
                            Generate Notice
                            Name
                            Application Number
                            Right ID
                        Division
                        Use ID

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

            });

I am trying to select all check boxes when the page loads by using the HTML attribute "checked" but this does not work all my check boxes are unchecked even when I use this.

How do I pre select all check boxes

super cool · Accepted Answer

Well you should be doing something like this

View Model:

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

Working fiddle here

Data - binding check boxes using Knockout JS

Answers (1)

Related Questions