What is the best way to sum up multiple checkbox values in JavaScript?

Question

What is the best way to sum up multiple checkbox values in JavaScript?

var bookRate = new Array('The Right to differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge');
var selection = document.rate.checkbox;
var sum = 0.00 ;

for (i=0; i<selection.length; i++)

  if (selection[i].checked == true)
    alert('Book Name : ' + bookRate[i] + ' \n Price of the book : ' + selection[i].value )

alert('Total Purchased Books : ' + selection[i].value );

That's what my current code looks like.

I'm wondering how to calculate the total when two checkboxes are checked?

This function only displays the selected item.

javascript checkbox

Answer 1

Answer №1

I recently added 2 checkboxes for selecting vehicles in my HTML form. Here's how it looks:

<form action="">
          <input type="checkbox" name="vehicle" value="5" onclick="check()">Vehicle 1 Price<br>
          <input type="checkbox" name="vehicle" value="4" onclick="check()">Vehicle 2 Price
       </form>

Below is the JavaScript function I am using:

function check() {
    var vehicleRates = ['The Right to Differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge'];
    var selections = document.getElementsByName('vehicle');
    var total = 0.00;

    for (i=0; i<selections.length; i++) {
        if (selections[i].checked == true) {
            total += parseInt(selections[i].value);
        }
    }

    alert('Total sum of Purchased Books: $' + total);
}

Answer 2

I recently added 2 checkboxes for selecting vehicles in my HTML form. Here's how it looks:

<form action="">
          <input type="checkbox" name="vehicle" value="5" onclick="check()">Vehicle 1 Price<br>
          <input type="checkbox" name="vehicle" value="4" onclick="check()">Vehicle 2 Price
       </form>

Below is the JavaScript function I am using:

function check() {
    var vehicleRates = ['The Right to Differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge'];
    var selections = document.getElementsByName('vehicle');
    var total = 0.00;

    for (i=0; i<selections.length; i++) {
        if (selections[i].checked == true) {
            total += parseInt(selections[i].value);
        }
    }

    alert('Total sum of Purchased Books: $' + total);
}

Answer 3

Answer №2

const availableBooks=['The Art of War', 'The Great Gatsby', 'Pride and Prejudice', 'To Kill a Mockingbird'];
let chosenBooks=document.purchase.checkbox;
let totalBooks=0, totalPrice=0.00;

for(let i=0;i<chosenBooks.length;i++)
{
    if(chosenBooks[i].checked)
    {
        totalBooks++;
        totalPrice+=(parseFloat(chosenBooks[i].value,10) || 0);
    }
}
alert("Total purchased books: "+totalBooks+"\nTotal cost: "+totalPrice);

Is this what you are looking for?

Answer 4

const availableBooks=['The Art of War', 'The Great Gatsby', 'Pride and Prejudice', 'To Kill a Mockingbird'];
let chosenBooks=document.purchase.checkbox;
let totalBooks=0, totalPrice=0.00;

for(let i=0;i<chosenBooks.length;i++)
{
    if(chosenBooks[i].checked)
    {
        totalBooks++;
        totalPrice+=(parseFloat(chosenBooks[i].value,10) || 0);
    }
}
alert("Total purchased books: "+totalBooks+"\nTotal cost: "+totalPrice);

Is this what you are looking for?

What is the best way to sum up multiple checkbox values in JavaScript?

Answer №1

Answer №2

Similar questions

D3.js is providing inaccurate tick numbers

Tips for customizing the AjaxComplete function for individual ajax calls

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

The progress event of the XMLHttpRequest updates quickly, outpacing the speed of the upload itself

Creating a fantastic Image Gallery in JavaScript

Transform JSON into a JavaScript array object using node.js

I'm struggling to update a value in my view with Angularjs and Socket.io. It seems impossible to

change the return value to NaN instead of a number

Customizing the Steps Component in Ant Design

Effortless Ways to Automatically Accept SSL Certificates in Chrome

Running nodejs scripts within my HTML and JavaScript code

Is it possible to automatically adjust the text color to match the background color?

Trouble arises with Javascript object destructuring when used with this.props in React

Webpack does not support d3-tip in its current configuration

Retrieve data from an SQL database and populate an HTML dropdown menu in a web page using PHP

Implementing jQuery in Ionic 3: A Step-by-Step Guide

Trouble arises when attempting to add an image to a spherical object

Steps for triggering a re-render in a React component when an external value changes

JavaScript Memoization: Enhancing Performance Through Caching