ko checkboxes

http://knockoutjs.com/examples/helloWorld.html

by Jorge Bustos Pereda

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div id="wrap">
    <label class="radio">
        <input data-bind="checked: GrammIsSelected, checkedValue: true" type="radio" name="a" />g
    </label>
    <br><br>
    <label class="radio">
        <input data-bind="checked: GrammIsSelected, checkedValue: false" type="radio" name="a" />ml
    </label>
    <br><br>
        
    <div class="control-group">
        <label class="control-label">choose</label>
        <div data-bind="visible: GrammIsSelected" class="controls">
            <input type="text" data-bind="value: WeightInGramms"><span class="help-inline">(g)</span>
        </div>
        <div data-bind="visible: !GrammIsSelected()" class="controls">
            <input type="text" data-bind="value: VolumeInMilliliters"><span class="help-inline">(ml)</span>
        </div>
    </div>
    <br><br>
            
    <div>
    Selected: 
        <div data-bind="visible: GrammIsSelected">g is active</div>
        <div data-bind="visible: !GrammIsSelected()">ml is active</div>
    </div>        
            
</div>

CSS

#wrap {
    padding:25px;
}

JavaScript

var ViewModel = function (data) {
	var self = this;
    this.VolumeInMilliliters = ko.observable(data.VolumeInMilliliters);
    this.WeightInGramms = ko.observable(data.WeightInGramms);

    this.GrammIsSelected = ko.computed({
    	read: function() {
            return (!self.WeightInGramms() && !self.VolumeInMilliliters()) || !self.VolumeInMilliliters();
        },
        write: function (newValue) {
        	console.log(newValue);
            return newValue;
        },
        owner: this
    });
    
};

var data = {
	VolumeInMilliliters: null,
    WeightInGramms: null
};

ko.applyBindings(new ViewModel(data));