JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<input data-bind="checked: selectedValues, value:primaryClass"  type="checkbox" >500</input>
<input data-bind="checked: selectedValues,value: secondaryClass" type="checkbox">200</input>
<input data-bind="checked: selectedValues,value:otherClass"  type="checkbox">100</input>

<br/>
Result:
<input data-bind="value: selectedValues().length > 0 ? sum : alternativeValue" type="text"></input>

JavaScript

function ViewModel() {
    var self = this;  
    self.primaryClass = ko.observable("30"); 
    self.secondaryClass = ko.observable("20"); 
    self.otherClass = ko.observable("10"); 
    self.alternativeValue = ko.observable(""); 
    
    self.selectedValues = ko.observableArray([]);

    self.sum = ko.computed(function () {
        var total = 0;
        ko.utils.arrayForEach(self.selectedValues(), function (item) {
            console.log("sectedValue: "+item);
            total += parseInt(item);
        });
        return total;
    });
        

}

ko.applyBindings(new ViewModel());