问题
I have the following ko markup which are two nested ol with checkboxes
<label><input type="checkbox" data-bind="checkedValue:true, checked: selectAll" />Check all</label>
<ol data-bind="foreach: Itemsnum">
<li>
<li><label><input type="checkbox" data-bind="checkedValue:true, checked: selectedOptionnum" />
<span data-bind="text: Name"></span></label></li>
<ol style="margin-left:10px" data-bind="foreach: $parent.Itemsabc">
<li style="margin-left:10px"><label><input type="checkbox" data-bind="checkedValue:true,checked: selectedOptionabc"/>
<span data-bind="text: Name"></span></label></li>
</ol>
</li>
</ol>
and this is my model
var viewModel = new
function() {
var self = this;
self.Itemsnum = [
{ Name: 'Option 1',
Value: 'o1'},
{ Name: 'Option 2',
Value: 'o2'},
{
Name: 'Option 3',
Value: 'o3'},
{
Name: 'Option 4',
Value: 'o4'}
];
self.Itemsabc = [
{ Name: 'Option a',
Value: 'oa'},
{ Name: 'Option b',
Value: 'ob'},
{
Name: 'Option c',
Value: 'oc'},
{
Name: 'Option d',
Value: 'od'}
];
self.selectedOptionnum = ko.observable(false);
self.selectedOptionabc = ko.observable(false);
self.selectAll = ko.observable();
/* self.selectAll = ko.computed({
read: function() {
var firstUnchecked = ko.utils.arrayFirst(self.Itemsnum, function(item) {
return item.selectedOptionnum() == false;
});
return firstUnchecked == null;
},
write: function(value) {
ko.utils.arrayForEach(self.Itemsnum, function(item) {
item.selectedOptionnum(value);
});
}
});*/
};
ko.applyBindings(viewModel);
I tried to adapt the following example http://jsfiddle.net/romanych/aGFmQ/ and propagate the checked behavior between parents but I get errors. I want to have all the cheked boxed checked, when checked all is clicked and for option[number] all the related option[abc]. Anyone has a clue ? thanks
fiddle
来源:https://stackoverflow.com/questions/38724919/is-there-a-way-to-handle-3-level-checkboxes-with-knockout