Question

One of my radio should selected when initialize (first load then user can change the selection), but radio is not selected first time, how to initialize “Selected” appropriately?

Here radio “Two” should selected as “selected” is True for this?

@using (Html.BeginForm("Index", "Two", FormMethod.Post, new Dictionary<string, object> { { "data-bind", "submit:onSubmit" } }))
{

<table>
    <tr>
        <td>
            <div data-bind="foreach: items">
                <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
                <span data-bind="text: name"></span>
            </div>
            <div data-bind="text: selected">
            </div>
        </td>
    </tr>
</table>

<input type="submit" name="send" value="Send" />
}

<script type="text/javascript">
var viewModel = {
    items: [
    { "id": 1, "name": "one", "selected": false  },
    { "id": 2, "name": "two", "selected": true },
    { "id": 3, "name": "three", "selected": false }
],
selected: ko.observable(),

    onSubmit: function(){

        var x = this.selected();

        }
    };

$(function() {
        ko.applyBindings(viewModel);
    });

</script>

Answer 1

You need to set your top level selected observable to the id of the value that is true.

something like:

$(function() {
    var selected = ko.utils.arrayFirst(viewModel.items, function(item) {
        return item.selected; 
    });

    if (selected) {
       viewModel.selected(selected.id);   
    }

    ko.applyBindings(viewModel);
});

Sample: http://jsfiddle.net/rniemeyer/rbsZC/