JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="foreach: categories">
    <div>
        <label>
            <span data-bind="text: name"></span>
            <input class="checkbox" type="checkbox" data-bind="value: id, checked: $root.item.links">
         </label>
    </div>
</div>
    
<div data-bind="text: ko.toJSON(item.links)"></div>

JavaScript

function vm() {
    var self = this;
    
    self.categories = [
        {id: 1, name: "Category 1"},  
        {id: 2, name: "Category 2"},  
        {id: 3, name: "Category 3"}
    ];
    
    // Assume this item came from server side, 
    // that's why i'm using the mapping plugin here.
    var rawItem = { links: [1] };
    self.item = { links: ko.observableArray(["1"]) }
}

ko.applyBindings(new vm());