JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="one">
<div data-bind="foreach: items">
    <label>
        <input type="checkbox" data-bind="checked: selected" /><span data-bind="text:name"></span>
    </label><br/>
</div>
    <div data-bind="text: ko.toJSON($root)"></div>
</div>
<br/><br/>
<div id="two">
<div data-bind="foreach: items">
    <label>
        <input name="items" type="radio" data-bind="radioCheck: selected" /><span data-bind="text:name"></span>
    </label><br/>
    </div><div data-bind="text: ko.toJSON($root)"></div>
</div>

<hr/>

<div data-bind="text: ko.toJSON($root)"></div>

JavaScript

var viewModel1 = {
    "items": [
        {
        "name": "one",
        "selected": ko.observable(true)},
    {
        "name": "two",
        "selected": ko.observable(false)},
    {
        "name": "three",
        "selected": ko.observable(false)}
    ]
};

var viewModel2 = {
    "items": [
        {
        "name": "one",
        "selected": ko.observable(true)},
    {
        "name": "two",
        "selected": ko.observable(false)},
    {
        "name": "three",
        "selected": ko.observable(false)}
    ]
};

ko.bindingHandlers.radioCheck = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        //initalize checked value of element
        element.checked = valueAccessor()();
        
        //attach event to handle changes
        $(element).change(function(e) {
            var item = ko.dataFor(element);
            var items = ko.contextFor(element).$parent.items;
            for (var i = 0; i < items.length; i++) {
                //set selected() for all items
                //true for the checked element, false for the rest
                items[i].selected(items[i] == item);                
            }
        });        
    }
};

ko.applyBindings(viewModel1, document.getElementById('one'));
ko.applyBindings(viewModel2, document.getElementById('two'));