JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<form>
    <input type="radio" name="group" value="t1" data-bind="checked: test" />
    test1
    <input type="radio" name="group" value="t2" data-bind="checked: test" />
    test2
    <input type="radio" name="group" value="t3" data-bind="checked: test" />
    test3
    
    <div data-bind="html: output"></div>
</form>

JavaScript

var viewModel = {
    test1: ko.observable('t1'),
    test2: ko.observable(''),
    test3: ko.observable('')
},
    currentTest = 'test1';

viewModel.output = ko.dependentObservable(function () {
    return 'test1: ' + viewModel.test1() + '<br />' +
        'test2: ' + viewModel.test2() + '<br />' +
        'test3: ' + viewModel.test3();
});

viewModel.test = ko.dependentObservable({
    read: function () {
        return viewModel[currentTest]();
    },
    write: function (newValue) {
        var testString = 'test' + newValue.substr(1);
        viewModel[currentTest]('');
        viewModel[testString](newValue);
        currentTest = testString;
    }
});

ko.applyBindings(viewModel);