敲除将复选框列表选中的项目绑定到另一个复选框列表答案

【问题标题】：knockout Bind checkboxlist checked items to another checkboxlist敲除将复选框列表选中的项目绑定到另一个复选框列表
【发布时间】：2015-06-17 15:00:34
【问题描述】：

使用 knockout.js 我有一个复选框列表，当我检查项目时，它将添加到另一个复选框列表项。我的意思是从列表到另一个复选框的所有选中项目。其次，当我取消选中第二个列表项时，它将删除当前表单并取消选中父项。

jsfiddle.net/pLNdc/90/

HTML

<div id="timetable">
    <ul class="calendar-short select-time" data-bind="template: { foreach: results }, style: { display: results().length > 0 ? 'block' : 'none' }">       
        <li>
            <input type="checkbox" class="css-checkbox" data-bind="value: id, checked: $parent.selectedChoices, attr: { id: 'timetable_' + id }">
            <label class="checkbox" data-bind="text: name, attr: { 'for': 'timetable_' + id }"></label>
        </li>
    </ul>
</div>

<div id="timetable">
    <ul class="calendar-short select-time" data-bind="template: { foreach: results1 }, style: { display: results().length > 0 ? 'block' : 'none' }">       
        <li>
            <input type="checkbox" class="css-checkbox" data-bind="value: id, checked: $parent.selectedChoices, attr: { id: 'timetable_' + id }">
            <label class="checkbox" data-bind="text: name, attr: { 'for': 'timetable_' + id }"></label>
        </li>
    </ul>
</div>
<div data-bind="text: selectedChoicesDelimited"></div>

Javascript

var anil = {
    results: ko.observableArray([{
        'id': 1,
            'name': 'anil'
    }, {
        'id': 2,
            'name': 'akash'
    }]),
    selectedChoices: ko.observableArray([]),
    results1:ko.observableArray([])
}
anil.selectedChoicesDelimited = ko.dependentObservable(function () {            
            anil.results1 = ko.observableArray(anil.selectedChoices());        
            return anil.results1();
        });   

ko.applyBindings(anil);

【问题讨论】：

你能不能稍微详细一点。我不太确定你想要达到什么目标。
@Pawan Bali - 您必须添加迄今为止尝试过的代码。这里不允许链接没有代码示例的 jsfiddle。请阅读 SO 帮助页面了解更多详情stackoverflow.com/help
jsfiddle.net/pLNdc/89 这是我想要实现的东西，但我的代码中的问题在哪里jsfiddle.net/pLNdc/90

标签： knockout.js

【解决方案1】：

试试这样的

您需要根据选中的复选框查询results，并将object推送到results2数组以分别绑定名称和id才能查看。

视图模型：

var anil = {
    results: ko.observableArray([{
        'id': 1,
            'name': 'anil'
    }, {
        'id': 2,
            'name': 'akash'
    }]),
    selectedChoices: ko.observableArray([]),
    results1:ko.observableArray([])
}

anil.selectedChoicesDelimited = ko.dependentObservable(function () {
  anil.results1([]);
   ko.utils.arrayForEach(anil.selectedChoices(), function (item1) {
     ko.utils.arrayForEach(anil.results(), function (item2) {
        if (item2.id == item1) {
            anil.results1.push(item2);
        }
      });
   });
}); 

ko.applyBindings(anil);

查看：。

<div id="timetable">
    <ul class="calendar-short select-time" data-bind="template: { foreach: results1 }, style: { display: results().length > 0 ? 'block' : 'none' }">       
        <li>
            <input type="checkbox" class="css-checkbox" data-bind="value: $data, checked: $parent.selectedChoices, attr: { id: 'timetable_' + $data }"/>
            <label class="checkbox" data-bind="text: name, attr: { 'for': 'timetable_' + $data }"></label>
        </li>
    </ul>
</div>
<div data-bind="text: selectedChoicesDelimited"></div>

工作样本小提琴here

【讨论】：

嗨，超级酷，您的代码有效，但复选框仅显示文本结果而不显示其他内容。像 anil 和 akash。