knockout.js - KnockoutJS: collecting values of checkboxes and selects in array together -

i'm pulling hair out on one. need loop on selected items, consisting both of checkboxes , select lists, , compile array of selected models.

this eluding me because checked , select's value work differently. trying store selected option in parent model (with selectedoption observable). worked fine <select> because saved reference model, checkboxes, save boolean value.

i tried setting flag on model itself, fine checkboxes, can't access individual options let them know they're current selection in select list.

all models populating checkboxes , dropdown lists of same type, i'm displaying them differently depending on internal properties.

how can collect models of selected options both checkboxes , select lists?

edit: adding samples. there's item model parent option model.

function itemmodel(vm, item) {     var self = this;     self.name = item.name;     self.description = item.description;     self.options = ko.observablearray(mapoptions(vm, item.options) || []);     self.selectedoption = ko.observable(); }  function optionmodel(vm, option) {     var self = this;     self.name = option.name;     self.sku = option.sku || "";     self.price = ko.observable(); } 

markup/bindings (in foolishly thought set checked value of checkbox model). if there's single option use checkbox, if more one, use select list.

<input type="checkbox" data-bind="checked: $parent.selectedoption, checkedvalue: $data" />  <select data-bind="value: selectedoption, options: options, optionstext: item.name optionscaption: 'choose...'"> </select> 

again, <select> works expected: value reference selected option, means can use data elsewhere in app (to tally summary of customer's order). checkbox, however, saves boolean value.

i think preferred way solve custom binding. here's 1 put should need.

ko.bindinghandlers.valuewhenchecked = {      init: function (element, valueaccessor) {          if (!ko.iswritableobservable(valueaccessor().model)) {              throw error("model must observable");          }          ko.utils.registereventhandler(element, "change", function () {              var model = valueaccessor().model;              model(element.checked ? valueaccessor().value : undefined);          });      },      update: function (element, valueaccessor) {          element.checked = valueaccessor().model() === valueaccessor().value;      }  };    function itemmodel() {      this.options = ko.observablearray(["test"]);      this.selectedoption = ko.observable();  }    ko.applybindings(new itemmodel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>    <input type="checkbox" data-bind="valuewhenchecked: { model: selectedoption, value: options()[0] }" />    <pre data-bind="text: ko.tojson($data, null, 2)"></pre>