In my last article "Two way binding radio button to observable" I suggested an approach for creating a two way binding for a pair of yes/no radio buttons using JQuery's "Custom Handler", this article deals with another binding problem, two way binding of an ObservableArray to a Checkbox List. Again jQuery's "Custom Handler" comes to the rescue.
Assume a custom handler as in the following:
/// ---------------------------- /// This binding is used to bind arrays of integer values to checkboxes ko.bindingHandlers.checkedIntValues = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var currentValues; // event handler for the element click event var updateHandler = function () { var boundItemIndex; var currentValues = ko.utils.unwrapObservable(valueAccessor()); var boundValue = ko.utils.unwrapObservable(allBindingsAccessor().value);
// get the index of the bound value in the array of current values boundItemIndex = ko.utils.arrayIndexOf(currentValues, boundValue); if ((element.checked) && (boundItemIndex < 0)) { // bound value is not in current values and checkbox is checked so add it currentValues.push(boundValue); } else { if ((!element.checked) && (boundItemIndex >= 0)) { // bound value is in current values and checkbox is not checked so remove it currentValues.splice(boundItemIndex, 1); } } }; // make sure the data being bound is an array currentValues = ko.utils.unwrapObservable(valueAccessor()); if (!(currentValues instanceof Array)) { throw "checkedIntValues binding can only be used with array data"; } // register click handler for element ko.utils.registerEventHandler(element, "click", updateHandler); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var value = ko.utils.unwrapObservable(valueAccessor()); var boundValue = ko.utils.unwrapObservable(allBindingsAccessor().value);
element.checked = ko.utils.arrayIndexOf(value, boundValue) >= 0; } };
In HTML do following:
<div class="selections" data-bind="foreach: YourObservableArray"> <input class="contactType"
type="checkbox" data-bind="checkedIntValues: $root.YourSelectedValuesObservableArray,value: YourIdProperty" />
<label data-bind=" text: YourTextProperty"></label><br /> </div>
Where
YourObservableArray: is the the observable array for all available items
YourSelectedValuesObservableArray: is the observable array for all selected values, that you may want to preselect,
keep it blank if you do not want any checkbox in the list to be checked.
YourItemIdProperty: is the Item's property to be selected.
YourItemTextProperty: is the item's property to be displayed.
For example:
YourObservableArrayName = [{YourItemIdProperty:1,YourItemTextProperty:"ankur"},{YourItemIdProperty:
2,YourItemTextProperty:"malik"},{YourItemIdProperty:3,YourItemTextProperty:"shikhar"}]YourSelectedValuesObservableArray =[1,2]
Then the checkbox list will have 3 checkboxes with the first two checkboxes checked and the last one unchecked.
Now if you uncheck the first two checkboxes and check the last checkbox then "YourSelectedValuesObservableArray" will be [3].
Hope that would help somebody.
Thanks...

Bhuvanesh MohankumarPosted May 3, 2016, 12:43 PM
Good one..
Gowtham RajamanickamPosted Apr 25, 2015, 5:57 AM
good one
Gowtham RajamanickamPosted Apr 25, 2015, 5:57 AM
great
Vithal WadjePosted Sep 26, 2014, 2:13 PM
good one