Binding true / false to radio buttons in Knockout JS

I know this is an old thread, but I was having the same problem and found out a much better solution that was probably added to knockout after this question was officially answered, so I'll just leave it for people with the same problem.

Currently there is no need for extenders, custom binding handlers or computeds. Just provide a "checkedValue" option, it will use that instead of the html 'value' attribute, and with that you can pass any javascript value.

<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: true"/><input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: false"/>

Or:

<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 1"/><input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 2"/><input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 3"/>

One option is to use a writeable computed observable.

In this case, I think that a nice option is to make the writeable computed observable a "sub-observable" of your IsMale observable. Your view model would look like:

var ViewModel = function() {   this.IsMale = ko.observable(true);   this.IsMale.ForEditing = ko.computed({        read: function() {            return this.IsMale().toString();          },        write: function(newValue) {             this.IsMale(newValue === "true");        },        owner: this            });          };

You would bind it in your UI like:

<label>Male   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale.ForEditing"/></label> <label>Female   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale.ForEditing"/></label>

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

This works for me:

http://jsfiddle.net/zrBuL/291/

<label>Male   <input type="radio" name="IsMale" value="1" data-bind="checked:IsMale"/></label> <label>Female   <input type="radio" name="IsMale" value="0" data-bind="checked:IsMale"/></label>