Data - binding check boxes using Knockout JS - html

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

Answer 1

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