The Header Checkbox when checked, should check all the child boxes. When the checkbox in header is checked or unchecked, nothing happens. When any checkbox in a row is checked/unchecked, it checks/unchecks all the checkboxes. What is going wrong here.
index.cshtml: <th>
<input type="checkbox" data-bind="checked: $root.SelectAll"/>
</th>
<tr>
<td>
<input type="checkbox" data-bind="checked: $root.SelectedChoices" />
</td>
</tr>
JS: //SelectedChoices is ko.observableArray([])
ViewModel.SelectAll = ko.dependentObservable({
read: function () {
return ViewModel.SelectedChoices().length ==
ViewModel.ClientData().length;
},
write: function (newValue) {
ViewModel.SelectedChoices(ViewModel.SelectedChoices().length ==
ViewModel.ClientData().length ? [] :
ViewModel.ClientData().slice(0));
},
owner: ViewModel
});
The logic used is exactly as in http://jsfiddle.net/rniemeyer/kXYuU/, just that, table's used instead of ul-li