knockout does not set an initial true value on radio button

Question

The 1-way binding for the names + checkbox works fine, but it does not work initially for the radio button employeeTypeA although its value is true in the viewmodel the html shows the radio button as not set, why is that?

   <script type="text/javascript">

        $(function()
        {
            var PersonViewModel = function()
            {
                this.firstName = ko.observable('Lisa');
                this.lastName = ko.observable('T');
                this.isCustomer = ko.observable(true);
                this.employeeTypeA = ko.observable(true);
                this.employeeTypeB = ko.observable(false);
            };

            var personViewModel = new PersonViewModel();
            ko.applyBindings(personViewModel, $('data').get(0));
        });
    </script>

    <div id="data">
        <span data-bind="text: firstName"></span>
        <span data-bind="text: lastName"></span>
        <input type="checkbox" data-bind="checked: isCustomer" title="Is a customer" />
        <input name="x" type="radio" data-bind="checked: employeeTypeA" title="Employee type A" />
        <input name="x" type="radio" data-bind="checked: employeeTypeB" title="Employee type B" />
    </div>

Answer 1

The checked binding works differently for radio buttons, from the documentation:

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute.

So you need to change your PersonViewModel to something like this:

var PersonViewModel = function()
{
    this.firstName = ko.observable('Lisa');
    this.lastName = ko.observable('T');
    this.isCustomer = ko.observable(true);
    this.employeeType = ko.observable('TypeB');                
};

And your radio buttons:

<input name="x" type="radio" data-bind="checked: employeeType" 
       value="TypeA" title="Employee type A" />
<input name="x" type="radio" data-bind="checked: employeeType" 
       value="TypeB" title="Employee type B" />

Demo JSFiddle.

If you want to keep the employeeTypeA and employeeTypeB properties you can introduce a computed property which returns the type:

this.employeeTypeA = ko.observable(false);
this.employeeTypeB = ko.observable(true);
this.employeeType = ko.computed(function()
{
     if (this.employeeTypeA())
        return 'TypeA';
     if (this.employeeTypeB())
        return 'TypeB';
},this);  

Also in this case you need to add the value attributes on your radio buttons.

Demo JSFiddle.