This puts a checkbox next to each item of a list where changing the checked status adds/removes that value from the SelectedItems array:

<script type="text/x-jquery-tmpl" id="tmpl">
    <input name="cSelect" 
           type="checkbox"
           value="${ ID }"
           data-bind="checked: VM.SelectedItems" />
    <!-- Add other item content here -->
</script>

VM.SelectedItems = ko.observeableArray([]);

At any point, SelectedItems contains the ids of the checked items.

What if I wanted the checkbox to add and remove an object to SelectedItems? For example, I want to store an actual object of { id : 3, checked : true } instead of serializing it for the value attribute?

This puts a checkbox next to each item of a list where changing the checked status adds/removes that value from the SelectedItems array:

<script type="text/x-jquery-tmpl" id="tmpl">
    <input name="cSelect" 
           type="checkbox"
           value="${ ID }"
           data-bind="checked: VM.SelectedItems" />
    <!-- Add other item content here -->
</script>

VM.SelectedItems = ko.observeableArray([]);

At any point, SelectedItems contains the ids of the checked items.

What if I wanted the checkbox to add and remove an object to SelectedItems? For example, I want to store an actual object of { id : 3, checked : true } instead of serializing it for the value attribute?

• javascript
• knockout.js

3 Answers 3

When using the checked binding against an array, it will only work with an array of primitives.

One option is to create a puted observable that builds your array of objects from the selected ids.

var ViewModel = function() {
    var self = this;
    this.items = [{id: 1, name: "one"}, {id: 2, name: "two"}, {id: 3, name: "three"}];
    this.selectedIds = ko.observableArray();
    this.selectedItems = ko.puted(function() {
        return ko.utils.arrayMap(self.selectedIds(), function(id) {
            return ko.utils.arrayFirst(self.items, function(item) {
                return item.id == id; //selected id will be a string
            }); 
        });
    });                                                           
};

ko.applyBindings(new ViewModel());

If you are dealing with a large number of items, then you might want to build an object that is an index of the items by key, so that you can loop through selectedIds and directly grab each object to reduce the amount of looping.

Here is a sample: http://jsfiddle/rniemeyer/pQQsY/

With KnockoutJS 3.0.0 you can use the checkedValue parameter:

<input name="cSelect" type="checkbox" value="${ ID }" data-bind="checkedValue: $data, checked: VM.SelectedItems" />

If your binding also includes checkedValue, this defines the value used by the checked binding instead of the element’s value attribute. This is useful if you want the value to be something other than a string (such as an integer or object), or you want the value set dynamically.

More details in the documentation

We can use like

<input type="checkbox" data-bind="attr: {value: JSON.parse($data).Id}, checked: $root.selectedIds"/>

and write a click event in the checkbox to get a selected data or subscripe method for selectedIds and get the selected id entire details as a JSON and we have to use JSON.parse to get the data.

but I don't how to store entire object with out JSON.