JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h3>Bootstrap</h3>

<p id="ByBootstrap" class="btn-group">
    <label class="btn btn-primary"><input type="radio" value="Yellow" />Yellow</label>
    <label class="btn btn-primary"><input type="radio" value="Red" />Red</label>
    <label class="btn btn-primary"><input type="radio" value="Blue" />Blue</label>
</p>

<p>
    <div data-bind="text: radioBootsrapSelectedOptionValue"></div>
</p>

JavaScript

ko.bindingHandlers.bootstrapChecked = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element),
            value = $element.val(),
            selectedValue = ko.unwrap(valueAccessor()),
            observable = ko.computed(function () { return selectedValue === value });
            binding = {
                    css: {
                        active: observable
                    }
                };
        
        ko.applyBindingsToNode(element.parentNode, binding, bindingContext);
    }
};
debugger;
var viewModel = {    
    radioSelectedOptionValue : ko.observable("Beta"),
    radioCodeSelectedOptionValue: ko.observable("Orange"),
    radioBootsrapSelectedOptionValue: ko.observable("Blue")
};
ko.applyBindings(viewModel);

var radios2 = $('#ByBootstrap').find(':radio');

var binding2 = { bootstrapChecked: viewModel.radioBootsrapSelectedOptionValue };

$.each(radios2, function(index, value) {    
    ko.applyBindingsToNode(value, binding2, viewModel);
});