jquery - Bind checkbox in grid without value -

i using knockout observable array bind html table this

<div> <button data-bind='click: update'>get data</button> </div> <div id="divlanguage" style="overflow: hidden;"> <table style="width: 760px;">     <tr>         <td style="padding: 0px;width: 100px;font-weight: bold">name</td>         <td style="padding: 0px;width: 70px;font-weight: bold">select</td>     </tr> </table> <div id="language" style="overflow: auto;height: 540px;">     <table id="table1" class="gridhover" style="width: 760px;">         <tbody data-bind="foreach: queryresult">             <tr>                 <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>                 <td style="padding: 0px;text-align: left;width: 70px">                     <input type="checkbox" />                 </td>              </tr>         </tbody>     </table> </div> 

the view model

var initialdata = [{ id: 1, name: "well-travelled kitten", sales: 352, price: 75.95, whatever: 10   }, { id: 2, name: "speedy coyote", sales: 89, price: 190.00, whatever: 100  }, ];   function viewmodel() { var self = this; self.queryresult = ko.observablearray(); this.update = function (data) {     //this ajax call , return dateset     $.each(initialdata, function (index, item) {         self.queryresult.push(item);     });  };  }   ko.applybindings(new viewmodel()); 

you can see checkbox not binded field. know can use checked binding bind data checkbox. problem cant bind checkbox column because getting information on fly. in observable array have property called id , information if id has value true or false. depending upon want bind checkbox.

i dont know how proceed this. have idea binding checkbox without column. once bind, how can value checkbox when check or uncheck it?

here fiddle

i start creating client side model , map incomming data it. way can have properties relevant client side.

javascript

var mymodel = function (data) {     var self = this;     self.id = ko.observable(data.id || '');     self.name = ko.observable(data.name || '');     self.price = ko.observable(data.price || 0.0);     self.sales = ko.observable(data.sales || 0);     self.whatever = ko.observable(data.whatever || '');     self.selected = ko.observable(false);     return self; };  function viewmodel() {     var self = this;     self.queryresult = ko.observablearray();     self.update = function (data) {         //this ajax call , return dateset         $.each(initialdata, function (index, item) {             self.queryresult.push(new mymodel(item));         });     };      self.selecteditems = ko.computed({         read: function () {             return ko.utils.arrayfilter(self.queryresult(), function (item) {                 return item.selected() === true;             });         },         deferevaluation: false     }); } 

html

<div>     <button data-bind='click: update'>get data</button> </div> <div id="divlanguage" style="overflow: hidden;">     <table style="width: 760px;">         <tr>             <td style="padding: 0px;width: 100px;font-weight: bold">name</td>             <td style="padding: 0px;width: 70px;font-weight: bold">select</td>         </tr>     </table>     <div id="language" style="overflow: auto;height: 540px;">         <table id="table1" class="gridhover" style="width: 760px;">             <tbody data-bind="foreach: queryresult">                 <tr>                     <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>                     <td style="padding: 0px;text-align: left;width: 70px">                         <input type="checkbox" data-bind="checked: selected" />                     </td>                 </tr>             </tbody>         </table>         <fieldset>             <legend>selected items</legend>             <ul data-bind="foreach: selecteditems">                 <li data-bind="text: name"></li>             </ul>         </fieldset>     </div> </div> 

so end jsfiddle demo