在樹狀複選框列表中選擇的子項目

我有一個包含複選框項目的JavaScript viewmodel。在樹狀複選框列表中選擇的子項目

JavaScript是在這裏：

var data = [ 
    {"name": "Computers", 
     "subcategories":[{"name":"Mac"}, {"name":"Desktop"}]}, 
    {"name": "Mobile Phones" , 
     "subcategories":[{"name":"Nokia"}, {"name":"Sony"}, {"name":"iPhone"}]} 
]; 

var viewModel = { 
    categories: ko.observableArray(data), 
    selectedCategories: ko.observableArray() 
}; 

ko.applyBindings(viewModel);

HTML代碼是這樣的：

<p>Categories: </p> 
<div data-bind="foreach: categories"> 
    <div> 
     <input type="checkbox" data-bind="checked: $parent.selectedCategories, checkedValue: $data.subcategories"/> <label data-bind="text: name"></label> 
     <ul data-bind="foreach: subcategories"> 
      <li><input type="checkbox" data-bind="checked: $root.selectedCategories, checkedValue: $data"/> <label data-bind="text: name"></label></li> 
     </ul> 
    </div> 
</div> 

<p>Selected items: </p> 
<div data-bind="text: ko.toJSON(selectedCategories)"></div>

enter image description here

當我點擊某個類別的主要複選框（計算機 ）子類別（Mac，桌面）沒有填充。所以我應該再次cl Mac和桌面複選框，但重複插入選定項目的記錄。

這裏是jsfiddle的代碼。

來源

2014-04-02 barteloma

請在你的問題的代碼一樣，所以這個問題是不容易死鏈接。 – Jeroen

這個小提琴看起來不像您在問題中提供的代碼或UI。啊哈，你更新了你的小提琴而不改變鏈接：http://jsfiddle.net/barteloma/3HQyG/1/ –

發生了什麼事是checkedValue在父類綁定存儲整個subcategories數組作爲對象的數組時檢查，當你想會發生什麼，我相信是存儲subcategories陣列中的每個對象分別。一種方法是用click處理程序代替checked和checkedValue。

的JavaScript：

var data = [ 
    { 
     "name": "Computers", 
     "subcategories": [{"name":"Mac"}, {"name":"Desktop"}] 
    }, 
    { 
     "name": "Mobile Phones" , 
     "subcategories": [{"name": "Nokia"}, {"name": "Sony"}, {"name": "iPhone"}] 
    } 
]; 

var viewModel = { 
    categories: ko.observableArray(data), 
    selectedCategories: ko.observableArray(), 
    toggleCategory: function(category, event) { 
     var checked = event.target.checked; 
     ko.utils.arrayForEach(category.subcategories, function(item) { 
      viewModel.selectedCategories.remove(item); 
      if(checked) { 
       viewModel.selectedCategories.push(item); 
      } 
     }); 
     return true; 
    }, 
}; 

ko.applyBindings(viewModel);

HTML

<p>Categories: </p> 
<div data-bind="foreach: categories"> 
    <div> 
     <input type="checkbox" data-bind="click: $root.toggleCategory"/> <label data-bind="text: name"></label> 
     <ul data-bind="foreach: subcategories"> 
      <li><input type="checkbox" data-bind="checked: $root.selectedCategories, checkedValue: $data"/> <label data-bind="text: name"></label></li> 
     </ul> 
    </div> 
</div> 

<p>Selected items: </p> 
<div data-bind="text: ko.toJSON(selectedCategories)"></div>

公告實施新toggleCategory方法的視圖模型和click: $root.toggleCategory結合取代了舊checked和checkedValue綁定是唯一件已經改變了。

工作JS小提琴（在Chrome測試）：http://jsfiddle.net/L2eWg/1/

來源

2014-04-02 18:49:10 Charlie

在樹狀複選框列表中選擇的子項目

回答

相關問題