Binding true / false to radio buttons in Knockout JS

http://stackoverflow.com/questions/10127001/binding-true-false-to-radio-buttons-in-knockout-js

HTML

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

<hr/>

<div data-bind="text: ko.toJSON($root)"></div>

CSS

li { margin: 5px; background: #eee; height: 50px; }

.menu { position: absolute; background-color: #000; color: #fff; height: 100px; }

JavaScript

ko.extenders.boolForEditing = function (target, allowNull) {
    var result = ko.computed({
        read: function () {
            var current = target();
            var newValue = null;
            if (current === undefined || current === null || current === '') {
                if (!allowNull) {
                    newValue = 'false';
                }
            } else {
                newValue = current ? 'true' : 'false';
            }
            return newValue;
        },
        write: function (newValue) {
            var current = target();
            var valueToWrite = null;
            if (newValue === undefined || newValue === null || newValue === '') {
                if (!allowNull) {
                    valueToWrite = false;
                }
            } else {
                valueToWrite = newValue === 'true';
            }
            // only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({
        notify: 'always'
    });
    
    result(target());
    
    return result;
};

var ViewModel = function() {
   this.IsMale = ko.observable();
   this.IsMale.forEditing = this.IsMale.extend({boolForEditing: true});
};

ko.applyBindings(new ViewModel());