Multiple Checkboxes con KnockOut.js

Recuperar los elementos seleccionados de una lista de checkbox con knockout. Solo utiliza ko.

by Alejandro Hernández

HTML

<div class="chk" data-bind="foreach: tareas">
  <span class="chk">
  <input type="checkbox" data-bind="checkedValue:id,checked:$root.tareasSeleccionadas"/>
  <span data-bind="text:descripcion"></span>
  </span>
</div>

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

CSS

.mostrarJson {
  border-color: red;
  padding: 5px;
  margin: 5px;
}

.chk {
  display: block;
}

JavaScript

var viewModel = {

tareasSeleccionadas:ko.observableArray([101,105]),

tareas:ko.observableArray([{"id":100,"descripcion":" 1 - Entrega de requerimiento"},{"id":101,"descripcion":" 2 - Entrega de informe de actuación"},{"id":102,"descripcion":" 3 - Notificación de DD"},{"id":103,"descripcion":" 4 - Constatación de domicilio"},{"id":104,"descripcion":" 5 - Relevamiento de DDJJ y pagos"},{"id":105,"descripcion":" 6 - Relevamiento de retenciones"},{"id":106,"descripcion":" 7 - Relevamiento de sueldos"},{"id":107,"descripcion":" 8 - Relevamiento de compras y ventas"},{"id":108,"descripcion":" 9 - Análisis y procesamiento"},{"id":109,"descripcion":"10 - Armado y entraga de inspecciones"},{"id":100,"descripcion":"11 - Giras"},{"id":111,"descripcion":"12 - Preparación rendición de gira"},{"id":112,"descripcion":"13 - Operativos especiales"},{"id":113,"descripcion":"14 - Capacitación / cursos"},{"id":114,"descripcion":"15 - Licencias / vacaciones"},{"id":115,"descripcion":"16 - Otras tareas"}])
  

};

ko.applyBindings(viewModel);