根据可观察数组的内容检查复选框答案

【问题标题】：check a checkbox based on the contents of an observable array根据可观察数组的内容检查复选框
【发布时间】：2015-08-30 07:22:07
【问题描述】：

我对使用淘汰赛 js 的复选框绑定感到震惊。我使用两个可观察的数组。第一个可观察数组用于显示所有学生详细信息值，并在视图中使用复选框。在第二个可观察数组中，我获得了一些过滤后的值，这些值需要在我已经显示带有整个值的复选框的视图中动态检查（true）。我的html代码是，

<div class="col-lg-10" style="white-space:pre">
    <div class="checkbox-inline" data-bind="foreach: $root.Studentdetails">
        <input type="checkbox" data-bind="
            checkedValue: $data,value:id(),
            checked: $root.associatedItemIds,
            click: $root.toggleAssociation
        " />
        <span data-bind="text: '&nbsp;' + Name()"></span>
    </div>
</div>

这就是我获取复选框的方法，

self.associatedItemIds=ko.obsearvablearray();   
self.associatedItemIds.push(response.CheckStudents);

【问题讨论】：

那么你的问题是什么？
@connexo：我需要为我在可观察数组中保存的值动态选择复选框。

标签： knockout.js

【解决方案1】：

您可以通过对象引用检查您的复选框（即，使用$data）。然后您将拥有一组选定的学生。

或者您通过一个值（如学生 ID）检查您的复选框。然后你会有一个学生ID的数组。

在任何情况下，您都不需要任何 click 处理程序或 value 绑定，knout 会自行完成所有操作。花点时间再读一遍the documentation。

比较：

function StudentList(students) {
  this.Studentdetails = ko.observableArray(students);
  this.associatedItems = ko.observableArray();
}

var students = [
  {Id: 1, Name: 'Student 1'},
  {Id: 2, Name: 'Student 2'},
  {Id: 3, Name: 'Student 3'},
  {Id: 4, Name: 'Student 4'}
];

var vm = new StudentList(students);
vm.associatedItems.push(students[2]);
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="col-lg-10">
    <div class="checkbox-inline" data-bind="foreach: $root.Studentdetails">
        <input type="checkbox" data-bind="
            checkedValue: $data,
            checked: $root.associatedItems,
        " />
        <span data-bind="text: Name"></span><br>
    </div>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

和：

function StudentList(students) {
  this.Studentdetails = ko.observableArray(students);
  this.associatedItemIds = ko.observableArray();
}

var students = [
  {Id: 1, Name: 'Student 1'},
  {Id: 2, Name: 'Student 2'},
  {Id: 3, Name: 'Student 3'},
  {Id: 4, Name: 'Student 4'}
];

var vm = new StudentList(students);
vm.associatedItemIds.push(students[2].Id);
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="col-lg-10">
    <div class="checkbox-inline" data-bind="foreach: $root.Studentdetails">
        <input type="checkbox" data-bind="
            checkedValue: Id,
            checked: $root.associatedItemIds,
        " />
        <span data-bind="text: Name"></span><br>
    </div>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

【讨论】：

但我需要动态检查（选中）复选框以获取我在可观察数组中保存的值。你给了我一个想法来选择复选框的值。
我还向您展示了基于数组的动态选择是如何工作的。运行代码sn-ps。想想我的第一个示例中的vm.associatedItems.push(students[2]); 行是做什么的，你就会明白。
你的小提琴甚至没有运行。抱歉，但我没有时间先修复您的小提琴，然后在您的代码中找到错误。假设这里的人除了 StackOverflow 之外还有其他生活。他们将业余时间免费用于帮助他人。你的工作就是让他们尽可能轻松。

【解决方案2】：

 <input type="checkbox" data-bind="attr: { id: 'chl'+Id},value: Id, checked:$root.associatedItemIds">

  self.associatedItemIds = ko.observableArray();

  for (var key in self.ProductsList()) {
            self.associatedItemIds.push("" + self.ProductsList()[key].Id);
        }

【讨论】：