radio buttons

by Allie Yu

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<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" />
 -->

CSS

table {
    width: 18%;
}
td {
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;
}

JavaScript

var viewModel = {
  items: [
    {
      "id": "NorthWest",
      "name": "1",
      "selected": true
    },
    {
      "id": "North",
      "name": "2",
      "selected": false
    },
    {
      "id": "NorthEast",
      "name": "3",
      "selected": false
		},
    {
      "id": "West",
      "name": 4,
      "selected": false
		},
    {
      "id": "Center",
      "name": 5,
      "selected": false
		},
    {
      "id": "East",
      "name": 6,
      "selected": false
		},
    {
      "id": "SouthWest",
      "name": 7,
      "selected": false
		},
    {
      "id": "South",
      "name": 8,
      "selected": false
		},
    {
      "id": "SouthEast",
      "name": 9,
      "selected": false
		},
  ],
    selected: ko.observable(),

    onSubmit: function() {

        var x = this.selected();

    }
};

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