Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://jsfiddle.net/ikbalouch/BkUUX/15/" rel="nofollow">Here at Jsfiddle</a> you will find a working solution for your problem, also it will display the selected locations as well.</p> <p>the html code is as:</p> <pre><code>&lt;div data-bind="template: { name: 'locationTmpl', foreach: locations, templateOptions: { selections: selectedLocations } }"&gt;/&lt;/div&gt; &lt;script id="locationTmpl" type="text/html"&gt; &lt;input type="checkbox" data-bind="attr: { value: $data }, checked: $data.isSelected" /&gt; &lt;span data-bind="text: $data.DisplayName"&gt;&lt;/span&gt; &lt;/script&gt; &lt;hr /&gt; &lt;div data-bind="text: JSON.stringify(ko.toJS(selectedLocations), null, 2)"&gt;&lt;/div&gt; &lt;hr /&gt; </code></pre> <p>the javascript code is as:</p> <pre><code>&lt;script type="text/javascript"&gt; function MyLocation(locationId, displayName, selected) { this.LocationId = ko.observable(locationId); this.DisplayName = ko.observable(displayName); this.isSelected = ko.observable(selected); } var viewModel = function (items) { this.locations = ko.observableArray([ new MyLocation('1', 'Starbucks1'), new MyLocation('2', 'Starbucks2', true), new MyLocation('3', 'Starbucks3'), new MyLocation('4', 'Starbucks4'), new MyLocation('5', 'Starbucks5') ]); //self.selectedLocations = ko.observableArray([self.locations()[1]]); this.selectedLocations = ko.computed(function () { return ko.utils.arrayFilter( this.locations(), function (item) { return item.isSelected(); } ); }, this); }; ko.applyBindings(new viewModel()); &lt;/script&gt; </code></pre> <p>I have introduced a blog of same code as well, you can check it <a href="http://www.imranbalouch.com/blog/index.php/2013/07/knockout-js-managing-check-boxes/" rel="nofollow" title="Imran Balouchs Blog">by clicking this link</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload