title: KnockoutJS radio buttons not changing like checkboxes do
body: <p>I have the same data structure for checkboxes and radio buttons. When checking the checkboxes, they return correct boolean value ('chosen' variable).</p>
  
  <p>However, when I check the radio buttons, 'chosen' always changes to the 'value' (integer).</p>
  
  <p>Also the radio buttons don't get "checked" in the beginning, even though 'chosen' == true</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>function attributeValueViewModel(data) {
      var self = this;
      self.id = ko.observable(data.id);
      self.attributeID = ko.observable(data.attributeID);
      self.value = ko.observable(data.value);
      self.chosen = ko.observable(data.chosen);
  }
  
  function viewModel() {
      var self = this;
      self.attributeValues1 = ko.observableArray([]);
      self.attributeValues2 = ko.observableArray([]);
      self.addToList = function(data) {
          ko.utils.arrayForEach(data, function(item) {           
              self.attributeValues1.push(new attributeValueViewModel(item));
              self.attributeValues2.push(new attributeValueViewModel(item));
          });
      };
  }
  
  var arr = [
      {
          "id": 55,
          "attributeID": 28,
          "value": "Yes",
          "chosen": false,
      },
      {
          "id": 56,
          "attributeID": 28,
          "value": "No",
          "chosen": true,
      },
      {
          "id": 62,
          "attributeID": 28,
          "value": "Maybe",
          "chosen": false,
      }
  ];
  
  var vm = new viewModel();
  ko.applyBindings(vm);
  vm.addToList(arr);
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;b&gt;Checkbox:&lt;/b&gt;
  &lt;div id="test1"&gt;
      &lt;span data-bind="foreach: attributeValues1()"&gt;
      &lt;input type="checkbox" data-bind="value: id(), checked: chosen, attr: { name: 'test1' }" /&gt;
      &lt;span data-bind="text: value()"&gt;&lt;/span&gt;
      &lt;span data-bind="text: chosen()"&gt;&lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;b&gt;Radio:&lt;/b&gt;
  &lt;div id="test2"&gt;
      &lt;span data-bind="foreach: attributeValues2()"&gt;
      &lt;input type="radio" data-bind="value: id(), checked: chosen, attr: { name: 'test2' }" /&gt;
      &lt;span data-bind="text: value()"&gt;&lt;/span&gt;
      &lt;span data-bind="text: chosen()"&gt;&lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>Here is my fiddle:</strong> <a href="http://jsfiddle.net/SN7Vn/1/" rel="nofollow">http://jsfiddle.net/SN7Vn/1/</a></p>
  
  <p>Can you please explain this behavior and why the radio buttons don't update boolean (like checkboxes do)?</p>