checkboxlist selectall using Knockout - asp.net-mvc-4

Question

I have a checkboxlist, I am trying to implement SelectAll/DeselectAll functionality.The items of the checkboxlist are being bound from the database.
This is how my checkboxlist looks
<div class="options"
data-bind="foreach: Factor,visible: true" style="display: none;">
<label>
<input type="checkbox" class='roles' name='roles'
data-bind="attr: { value: Id },
checked:MyViewModel.MyData.MyCheckedValues" />
<span data-bind="text: Name"></span>
</label>
</div>
MyCheckedValues and Factor are observable arrays here.
This is how MyData looks
MyData: function () {
var currentObject = this;
currentObject.MyCheckedValues= ko.observableArray()
}
selectAll: function()
{
ko.utils.arrayForEach();
return true;
}
In the internet articles I found, a separate function is used where they declare an attribute called IsSelected and set it to false initially etc and then loop through it.
But I dont have any separate function related to this.
Can you help me implementing select/deselect all?

Answer 1

You can also use ko.computed for selectAll and Deselect.
html:-
<span data-bind="text: selectAll()?'Deselect All':'Select All'"></span><input type="checkbox" data-bind="checked: selectAll" />
<div class="options" data-bind="foreach: Factor,visible: true" style="display: none;">
<label>
<input type="checkbox" class='roles' name='roles' data-bind="attr: { value: id },checked:isSelected" /> <span data-bind="text: name"></span>
</label>
</div>
ViewModel:-
function Factor(id, name) {
this.id = id;
this.name = name;
this.isSelected = ko.observable(false);
}
function viewModel() {
var currentObject = this;
currentObject.Factor = ko.observableArray([new Factor(1, "Jack"), new Factor(2, "John")]);
currentObject.selectAll = ko.computed({
read: function () {
var item = ko.utils.arrayFirst(currentObject.Factor(), function (i) {
return !i.isSelected();
});
return item == null;
},
write: function (value) {
ko.utils.arrayForEach(currentObject.Factor(), function (i) {
i.isSelected(value);
});
}
});
}
ko.applyBindings(new viewModel());
Working Fiddle

Answer 2

Since I can't see your full model and am a bit confused by your bindings, I've made a quick example for you that you should be able to modify for your use.
Markup:
<button data-bind="click: selectAllCheckboxes">Select all</button>
<button data-bind="click: deselectAllCheckboxes">Deselect all</button>
<ul data-bind="foreach: data">
<li>
<label>
<input type="checkbox" data-bind="value: Id, checked: $parent.selectedCheckboxes">
<span data-bind="text: Name"></span>
</label>
</li>
</ul>
And the JS:
var myViewModel = function () {
this.data = ko.observableArray( [
{ Id: 1, Name: 'Example 1' },
{ Id: 2, Name: 'Example 2' },
{ Id: 3, Name: 'Example 3' },
{ Id: 4, Name: 'Example 4' },
{ Id: 5, Name: 'Example 5' }
] );
this.selectedCheckboxes = ko.observableArray();
this.selectAllCheckboxes = function () {
var selectedCheckboxesArray = this.selectedCheckboxes();
selectedCheckboxesArray.length = 0;
ko.utils.arrayForEach( this.data(), function ( data ) {
selectedCheckboxesArray.push( '' + data.Id );
} );
this.selectedCheckboxes.valueHasMutated();
};
this.deselectAllCheckboxes = function () {
this.selectedCheckboxes().length = 0;
this.selectedCheckboxes.valueHasMutated();
};
};
ko.applyBindings( new myViewModel() );
And here's a fiddle: http://jsfiddle.net/4VGGd/