Javascript 树状复选框列表中的选定子项

我有一个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);

<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>

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代码如下所示：

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);

<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>

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);

类别：




选定项目：

单击类别（计算机）的主复选框时，子类别（Mac，桌面）未填充。因此，我应该再次点击Mac和Desktop复选框，但重复记录会插入selecteditems中

---

这里是代码。

发生的是父类别中的

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()
};

ko.applyBindings(viewModel);

<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>

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。替换旧的
checked
和
checkedValue
绑定的toggleCategory

绑定是唯一已更改的部分

---

使用JS Fiddle（在Chrome中测试）：

请在您的问题中也包含代码，这样问题就不会受到链接损坏的影响。该Fiddle看起来不像您在问题中提供的代码或UI。啊哈，你在不改变链接的情况下更新了你的小提琴：