Change value of a Radio Button when another is clicked
<p>I need to create a list of options that when I click in one option I change the value off all other option with "X". It's working fine except that the option that I select do not stay selected. Does anyone know what is wrong?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [{
  name: "CheckBox1",
  status: " "
}, {
  name: "CheckBox2",
  status: "X"
}, {
  name: "CheckBox3",
  status: "X"
}];

var ViewModel = function() {
  var self = this;
  self.list = ko.mapping.fromJS(data);

  self.change = function(data) {
    for (i = 0; i &lt; self.list().length; i++)
      self.list()[i].status("X");
    data.status(" ");
    return true;

  }

}

ko.applyBindings(new ViewModel(data));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"&gt;&lt;/script&gt;


&lt;!--ko foreach: $root.list--&gt;
&lt;!-- ko with: $data --&gt;
&lt;label data-bind="text: name"&gt;&lt;/label&gt;
&lt;input type="radio" data-bind="checkedValue: status() === ' ', click:$root.change" /&gt;
&lt;!--/ko--&gt;
&lt;!--/ko--&gt;

&lt;!--ko foreach: $root.list--&gt;
&lt;!-- ko with: $data --&gt;
&lt;p data-bind="text: name"&gt;&lt;/p&gt;
&lt;p data-bind="text: status"&gt;&lt;/p&gt;

&lt;!--/ko--&gt;
&lt;!--/ko--&gt;</code></pre>
</div>
</div>
</p>