check a checkbox based on the contents of an observable array

Question

I got struck with the checkbox bind using knockout js. I use two observable arrays. First observable array is used to display all the student details value with the checkbox in the view. In the 2nd observable array I obtain some values filtered that need to be checked(true) dynamically in the view where I have already displayed the checkbox with the whole value. My html code is,

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

And this is the way i approach to gets the checkbox selecetd,

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

@connexo: I need to get the checkbox dynamically selecetd for the values I hold in an observable array. — Aarthi Ravendiran

Tomalak Tomalak · Accepted Answer · 2015-08-30T07:53:55

Either you check your checkboxes by object reference (i.e, using $data). Then you will have an array of selected students.

Or you check your checkboxes by a value (like the student Id). Then you will have an array of student Ids.

In no case you need any click handlers or the value binding, knockout does everything on its own. Take some time to read the documentation again.

Compare:

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>

and:

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>

check a checkbox based on the contents of an observable array

2 Answers