dynamic radio button behaviour with knockout js

javascript, knockout.js, radio-button

Solution

In the case of radio buttons the `checked` binding by default compares the input's `value` attribute - which is a string - to the model property.

So you need to store strings in your `selectedradio` :

self.moveUp = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())-1).toString())
    self.reIndex();
};
self.moveDown = function(r) {
    r=parseInt(r,10);
    self.selectedradio((parseInt(self.selectedradio())+1).toString())
    self.reIndex();
};

It works with the textbox because it will fill in the `selectedradio` with the entered string.

Demo JSFiddle.

Or you can change the default behavior and you can tell KO to use a different property as the checkbox's value with the `checkedValue` option:

<input type="radio" name="group" data-bind="value:radioid, 
       checked:$parent.selectedradio, checkedValue: radioid"/>

In this case you don't need to alter your `moveUp` and `moveDown` methods because now the `selectedradio` will always contain integers however because your textbox still sets the `selectedradio` to string it won't work any more.

Demo JSFiddle.

Problem

I have a button to create radio buttons like this: ``` <input value="&uparrow;" type="button" data-bind=" click: moveUp"/> <input value="&downarrow;" type="button" data-bind="click: moveDown"/> <input data-bind="value: selectedradio" /> <div data-bind="foreach: radios"> <div data-bind="attr:{id:radioid} "> <input type="radio" name="group" data-bind="value:radioid, checked:$parent.selectedradio"/> </div> </div> <div> <input type="button" value="+" data-bind="click: addRadio"/> </div> ``` when the radio buttons are created they are each assigned a unique index and i have bound the checked attribute to a property on the parent called `selectedradio` I am able to modify `selectedradio` though an html input and the selected radio will change but If I modify the value progmmatically it will not. I created a fiddle here: http://jsfiddle.net/8vVeU/ here is the javascript for reference: ``` function Radio(id){ this.radioid = ko.observable(id); } function ViewModel() { var self = this; self.selectedradio = ko.observable(0); self.radios = ko.observableArray([new Radio(0),new Radio(1),new Radio(2),new Radio(3)]); self.addRadio = function() { self.radios.push(new Radio()); self.reIndex(); }; self.moveUp = function() { self.selectedradio(self.selectedradio()-1) self.reIndex(); }; self.moveDown = function() { self.selectedradio(self.selectedradio()+1) self.reIndex(); }; self.reIndex = function() { $.each(self.radios(), function(i, r) { r.radioid(i); }); } } ko.applyBindings(new ViewModel()); ``` How can I resolve this issue?

Original source