JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach: radios">
    <input type="radio" name="memberType" data-bind="value: $data, checked: $parent.selectedRadio" />
    <span data-bind="text: $data"></span></br>
</div>

<div data-bind="foreach: radios">
    <span data-bind="text: $data, fadeSwitcher: $data == $parent.selectedRadio()"></span>
</div>

<button data-bind="click: log">Log</button>

JavaScript

var previousElement = null;
ko.bindingHandlers.fadeSwitcher = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value));
    },
    update: function(element, valueAccessor) {
        
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            if (previousElement == null) { // initial fade
                $(element).fadeIn();
            } else {
                $(previousElement).fadeOut('fast', function() {
                    $(element).fadeIn();
                });
            }
            previousElement = element;
        }        
    }
};

var ViewModel = function(radios) {
    var self = this;
    self.radios = ko.observableArray(radios);
    self.selectedRadio = ko.observable();

    self.log = function() {
        console.log(self.selectedRadio());
    };
};

var radioOptions = ["Myself", "MemberId", "MemberUrl"];
ko.applyBindings(new ViewModel(radioOptions));