JSFiddle - React, Tailwind, and code Playground

by Dtwigs

HTML

<label>
    <input data-bind="checked: selectedValues, value: primaryClass" type="checkbox"></input>
    <span data-bind="text: primaryClass"></span>
</label>
<label>
<input data-bind="checked: selectedValues, value: secondaryClass" type="checkbox"></input>
    <span data-bind="text: secondaryClass"></span>
</label>
<label>
<input data-bind="checked: selectedValues, value: otherClass" type="checkbox"></input>
    <span data-bind="text: otherClass"></span>
</label>

<br/>
Result:
<input data-bind="value: sum" type="text"></input>

JavaScript

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

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

}

ko.applyBindings(new ViewModel());