JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div data-bind="foreach: locations">
    <input type="checkbox" data-bind="attr: { value: $data }, checked: isSelected" />
    <span data-bind="text: $data.DisplayName"></span>
</div>
<hr />

Selected Locations...
<div data-bind="foreach: selectedLocations">
    <span data-bind="text: $data.DisplayName"></span>
</div>

<hr />

JavaScript

var location = function (locationId, displayName, selected) {
	var self = this;
	self.LocationId = locationId;
	self.DisplayName = displayName;
    self.isSelected = ko.observable(selected);
};

function viewModel() {
    var self = this;
    self.locations = ko.observableArray([
        new location('1','Starbucks1'),         
        new location('2','Starbucks2', true),         
        new location('3','Starbucks3'),
        new location('4','Starbucks4'), 
        new location('5','Starbucks5')
    ]);
    
    //self.selectedLocations = ko.observableArray([self.locations()[1]]);                              
    self.selectedLocations = ko.computed(function() {
        var locs = self.locations();
        var selectedLocs = [];
        for(var i = 0; i < locs.length; i++) {
            if(locs[i].isSelected()) {
                selectedLocs.push(locs[i]);
            }
        }
        return selectedLocs;
    });
};

var vm = new viewModel();
ko.applyBindings(vm);