Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

Question

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

I have already created this using jQuery. You can view it on JSFiddle: JSFiddle

HTML:

<div class="container">
    <header>
         <h3>The Crazy Things We'll Do for Money</h3>
        <div class="small"><em>An elegant way to test Knockout JS that you're considering.</em>
        </div>
    </header>
    <ul>
        <li>
            <input type="checkbox" name="services" value="150" id="srv" />
            <span>Throw knives at us while we're strapped on a turntable ($150)</span>
        </li>
        <li>
            <input type="checkbox" name="services" value="200" id="srv" />
            <span>Watch us get chased by bulls ($200)</span>
        </li>
        <li>
            <input type="checkbox" name="services" value="799.50" id="srv" />
            <span>Watch us in a straight jacket immersed in a pool of electric eels and try to escape Houdini style. ($799.50)</span>
        </li>
    </ul>
    <hr/>
    <div class="marginise">
    <strong>I want to help with your hospital bills</strong>
        <select id="donate" name="donate">
            <option value="0">No Thanks</option>
            <option value="100">$100</option>
            <option value="300">$300</option>
            <option value="500">$500</option>
        </select>
        <p><strong>Donations</strong>: <span id="blah"></span>
        </p>
    </div>
    <div class="est">
         <h4>Total</h4>
         <span id="serviceTotal"></span>
    </div>
    <div class="f">These Events / Entertainment Services are not real. Unfortunately.</div>
</div>

jQuery:


function outputValue() {
    mathUsage();
    var donValues = $("#donate").val(); 
    $("#blah").html(numeral(donValues).format('$0,0[.]00'));
}
var $cap = $('input[name="services']; 

function mathUsage() {
    var total = $("#donate").val(); 
    $cap.each(function () {
        if (this.checked) total = parseFloat(total) + parseFloat(this.value);
    });
    $("#serviceTotal").text(numeral(total).format('$0,0[.]00'));
}

$("select").change(outputValue);
outputValue();

$cap.click(mathUsage);

I am looking to recreate this using knockoutJS so I can reduce the amount of HTML markup. Any suggestions on the best approach?

There are similar examples out there like this one on Fiddle that show how to output checkbox values in an array. I was thinking of utilizing a similar method to calculate a sum but unsure of where to begin or which syntax to use.

javascript jquery html css knockout.js

Answer 1

Answer №1

To start, it's important to assign each checkbox its own unique id and name:

<ul>
        <li>
            <input type="checkbox" name="knives" value="150" id="knives" data-bind="checked: knives" />
            <span>Throw knives at us while we're strapped on a turn table ($150)</span>

        </li>
        <li>
            <input type="checkbox" name="bulls" value="200" id="bulls" data-bind="checked: bulls"  />
            <span>Watch us get chased by Bulls ($200)</span>

        </li>
        <li>
            <input type="checkbox" name="eels" value="799.50" id="eels" data-bind="checked: eels" />
            <span>Watch us in a straight jacket immersed in a pool of electric Eels and try to get out of it Houdini style. ($799.50)</span>

        </li>
    </ul>

Next, create the view model with the following structure:

var viewModel = function() {
    var self = this;
    self.knives = ko.observable(false);
    self.bulls = ko.observable(false);
    self.eels= ko.observable(false);

    self.total = ko.computed(function() {
      var totalCost = 0;
      if (self.knives())
        totalCost += 150;
      if (self.bulls())
        totalCost += 200;
      if (self.eels())
        totalCost += 799.50;    
      return totalCost; 
    });
};

ko.applyBindings(new viewModel());

This sets up the basic structure for your view model. You can expand on it by adding more properties for other services or organizing the values differently. The customization is up to you.

Answer 2

To start, it's important to assign each checkbox its own unique id and name:

<ul>
        <li>
            <input type="checkbox" name="knives" value="150" id="knives" data-bind="checked: knives" />
            <span>Throw knives at us while we're strapped on a turn table ($150)</span>

        </li>
        <li>
            <input type="checkbox" name="bulls" value="200" id="bulls" data-bind="checked: bulls"  />
            <span>Watch us get chased by Bulls ($200)</span>

        </li>
        <li>
            <input type="checkbox" name="eels" value="799.50" id="eels" data-bind="checked: eels" />
            <span>Watch us in a straight jacket immersed in a pool of electric Eels and try to get out of it Houdini style. ($799.50)</span>

        </li>
    </ul>

Next, create the view model with the following structure:

var viewModel = function() {
    var self = this;
    self.knives = ko.observable(false);
    self.bulls = ko.observable(false);
    self.eels= ko.observable(false);

    self.total = ko.computed(function() {
      var totalCost = 0;
      if (self.knives())
        totalCost += 150;
      if (self.bulls())
        totalCost += 200;
      if (self.eels())
        totalCost += 799.50;    
      return totalCost; 
    });
};

ko.applyBindings(new viewModel());

This sets up the basic structure for your view model. You can expand on it by adding more properties for other services or organizing the values differently. The customization is up to you.

Answer 3

Answer №2

To achieve the desired result, you can use the following code:

var DataModel = function(name, age) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
 
    this.total = ko.computed(function() {
        
        return parseFloat(this.name())  + parseFloat(this.age());
    }, this);
};
 
ko.applyBindings(new DataModel("John", "25"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'>   
    <p>Name: <input data-bind='value: name' /></p> 
    <p>Age: <input data-bind='value: age' /></p> 
    <h2> <span data-bind='text: total'> </span></h2>  
</div>

For a live example, view this Fiddle.

Answer 4

To achieve the desired result, you can use the following code:

var DataModel = function(name, age) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
 
    this.total = ko.computed(function() {
        
        return parseFloat(this.name())  + parseFloat(this.age());
    }, this);
};
 
ko.applyBindings(new DataModel("John", "25"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'>   
    <p>Name: <input data-bind='value: name' /></p> 
    <p>Age: <input data-bind='value: age' /></p> 
    <h2> <span data-bind='text: total'> </span></h2>  
</div>

For a live example, view this Fiddle.

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

Answer №1

Answer №2

Similar questions

The links located beneath the iframe/span element are unclickable

Using AngularJS to dynamically populate a dropdown menu from a JSON object

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Tips on refreshing the D3 SVG element following updates to the dataset state in a React application

What is the best way to delay Angular for 5 seconds before initiating a page transition?

Activate a particular panel within the leftPanel using PDFNet Webviewer

Click event to verify, delete, and include class identifier in angular13

Utilizing Freebase Suggest, is there a way to refine a field by the choice of another field?

Trigger a page refresh in jQuery upon database update

performing a GET request directly from a <script> element in the index.html file

Why does the data in useState only update after clicking the button for the second time?

The outcome of AES encryption varies when comparing Node JS with C# programming languages

What steps do I need to take in Bootstrap 5 to add a search icon to the navbar that reveals a search box beneath it when clicked?

Ways to verify if a web URL is contained within an HTML textbox

Using jQuery to attach events and trigger them

Unable to use the ordered tag correctly in typing

Unequal spacing between the edges of two background images

Mastering the utilization of componentDidMount and componentDidUpdate within React.js: a comprehensive guide

Event handlers for textboxes in Visual Web Developer are a crucial component for

Mysterious symbols appearing in text/html encoding on Firefox