Knockout Table Checkbox Binding
HTML
<h4>Employees:</h4>
<table>
<thead>
<tr><th>Select</th><th>First name</th><th>Last name</th><th>Role</th></tr>
</thead>
<tbody data-bind="foreach: $root.employees">
<tr>
<td><input type="checkbox" data-bind="value: id(), click: $root.toggleAssociation" /></td>
<td><span data-bind="text: name"></span></td>
<td><span data-bind="text: sname"></span></td>
<td><span data-bind="text: role"></span></td>
</tr>
</tbody>
</table>
<h4>Selected co-workers:</h4>
<div data-bind="foreach: $root.selectedEmployees">
<span data-bind="text: name() + ' ' + sname()"></span>
<br/>
</div>
<div>
<button data-bind="click: save">Valider</button>
</div>
JavaScript
function Employee(id, name, sname, role) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
self.sname = ko.observable(sname);
self.role = ko.observable(role);
self.Selected = ko.observable(false); // if checked or not
}
function ViewModel() {
var self = this;
self.employees = ko.observableArray();
self.selectedEmployees = ko.computed(function() {
return self.employees().filter(function(item) {
return item.Selected();
});
});
self.init = function () {
self.employees.push(new Employee(1, 'Tom', 'Jones', 'Manager'));
self.employees.push(new Employee(2, 'James', 'Bond', 'Designer'));
self.employees.push(new Employee(3, 'Darren', 'Wright', 'Developer'));
};
self.toggleAssociation = function (item) {
item.Selected(!(item.Selected()));
return true;
};
self.save = function() {
var txt="";
var tab =self.selectedEmployees();
for(i=0;i< self.selectedEmployees().length;i++)
{
txt = txt+" "+self.selectedEmployees()[i].id();
}
alert(txt);
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();