Knockout Dynamic Click

Question

我想动态点击复选框，该复选框应显示另一个复选框，其中包含第一个复选框的可用选项。我一次可以选中两个复选框。

我的Plunker

所需Fiddle

使用小提琴的工作示例，但我想要与复选框和不同的数据结构相同。

JS

(function() {
'use strict';
ko.components.register('marketsub',{
viewModel:function(params){
  var self=this;
  var bindto= params.options;
  var marketH=[
          {CityMarket:"", Market:"Estados do Norte",SubMarket:"Amazonas"},
          {Market: "Estados do Sudeste", SubMarket: "Espírito Santo",  
   CityMarket: ""},
          {Market: "Estados do Sudeste", SubMarket: "São Paulo", CityMarket: "Berrini (SP)"},
          {Market: "Estados do Sudeste", SubMarket: "Minas Gerais", CityMarket: ""},
           {Market: "Estados do Sudeste", SubMarket: "Rio de Janeiro", CityMarket: ""},
           {Market: "Estados do Sudeste", SubMarket: "São Paulo", CityMarket: ""},
           {Market: "Região Sul", SubMarket: "Paraná", CityMarket: ""},
           {Market: "Região Sul", SubMarket: "Rio Grande do Sul", CityMarket: ""},
           {Market: "Região Sul", SubMarket: "Santa Catarina", CityMarket: ""},
           {Market: "Estados do Sudeste", SubMarket: "São Paulo", CityMarket: "Faria Lima (SP)"}
];
this.markets = ko.observableArray(marketH);
this.submarkets = ko.observableArray(marketH);
this.citymarkets= ko.observableArray(marketH);
      this.markets.SelectedValue = ko.observableArray(self.markets.SelectedValue);
},
template:'<div>\
<ul data-bind="foreach: markets">\
 <li class="FormMultiSelect-option">\
  <label class="FormMultiselect-checkboxLabel">\
  <input class="FormMultiselect-checkbox"  }"  type="checkbox">\
          <span data-bind="text:Market"></span>\
   </label>\
  </li>\
  </ul>\
  </div>'

     })

}());
// top level viewmodel
var vm = function() {
var self = this;

 };
ko.applyBindings(new vm());