JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!-- ko foreach: documents -->
        <div>
            <input type="checkbox" data-bind="checked: $parent.checkItem(documentId)" />
        </div>
<!-- /ko -->

<!-- ko foreach: selectedDocuments -->
        <div>
            <span data-bind="text: this"></span>
        </div>
<!-- /ko -->

JavaScript

var checkItem = function (checkedItem) {
        debugger;
        selectedDocuments.push(checkedItem);
    };

var selectedDocuments = ko.observableArray();

var viewModel = {
    checkItem: checkItem,
    documents: [{"documentId": "1"}, {"documentId": "1"}, {"documentId": "1"}],
    selectedDocuments: selectedDocuments
};
ko.applyBindings(viewModel);