Tally up the values of selected checkboxes

 

I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to determine the total count for Screens, Range, and Other, which should be shown in the SUMMARY section. Appreciate any assistance!

An efficient way needs to be discovered to calculate data-values affiliated with checkboxes. This specific code snippet showcases how the main values are computed after you select different places via checkboxes. It's critical to track the combined count of Screens, Range, and Other as well. These aggregated totals will be displayed under the SUMMARY section of the page layout. Your input on achieving this result would be highly appreciated.
There is an urgent requirement to determine the cumulative sum of data-values related to the selection of checkboxes. The script provided here illustrates the computation logic behind the main values derived from checkbox inputs corresponding to various places. Additionally, valuable insights regarding the collective counts for Screens, Range, and Other must be visualized within the SUMMARY segment. Seeking guidance on integrating this functionality effectively into the existing framework, thank you for your support.

   
javascripthtmljquerycssfunction

Answer №1

Throughout this process, I've introduced specific id selectors to the fields and developed a render function tailored for summarizing purposes.

var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total3 = document.querySelector('#payment-total')
var total6 = document.querySelector('#payment-total2')
var total12 = document.querySelector('#payment-total3')
const totalScreenDiv = document.querySelector('#total-screen');
const totalRangeDiv = document.querySelector('#total-range');
const totalOtherDiv = document.querySelector('#total-other');
const screen1 = document.querySelector('#screen-1');
const screen2 = document.querySelector('#screen-2');
const screen3 = document.querySelector('#screen-3');
const range1 = document.querySelector('#range-1');
const range2 = document.querySelector('#range-2');
const range3 = document.querySelector('#range-3');
const other1 = document.querySelector('#other-1');
const other2 = document.querySelector('#other-2');
const other3 = document.querySelector('#other-3');

// Additional JavaScript code


<div class="styling">
<style>
...
</style>
</div>

<script type="text/javascript">
...
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Language translation API specifically designed to convert text content excluding any HTML formatting

I have a dilemma with translating text content in an HTML file into multiple languages based on user input. To accomplish this, I am utilizing the Microsoft Translator AJAX interface. The structure of my HTML file looks something like this; <h1>< ...

javascripthtmlajaxgoogle-translatemicrosoft-translator

Having difficulty applying a style to the <md-app-content> component in Vue

Having trouble applying the CSS property overflow:hidden to <md-app-content>...</md-app-content>. This is the section of code causing issues: <md-app-content id="main-containter-krishna" md-tag="div"> <Visualiser /> </md-app ...

javascriptvue.jssassvue-material

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

Material-UI: Avoid onClick event firing when clicking on an element that is overlapped by another in a sticky Table

I have a unique setup in my table where each row, including the header row, begins with a checkbox. This header row has a sticky property. As I scroll through the table, rows start to move behind the header row. If I try to click the checkbox in the heade ...

javascriptreactjsmaterial-ui

Assign a value to the Angular directive for the SharePoint People Picker

In my create form, I have successfully used a directive to capture and store values in SharePoint via REST. The directive I am using can be found at this link. Within my HTML, I am implementing the directive like this: <sp-people-picker name="CC" id=" ...

javascriptangularjssharepoint

Calculate the total number of pages within an epub document

As a beginner in the world of epub, I have acquired numerous files in different epub formats and now wish to make them easily readable online. I'm not quite sure what an epub file contains. Is there a method to determine the number of pages in my epub ...

javascriptphpxmlepubepub3

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

I'm currently working on a script that needs to grab content only within a specific parent structure defined as div.main-element input+label+ul. Is there a way to achieve this using JavaScript or jQuery? If anyone could point me in the right directi ...

javascriptjqueryhtml

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

javascripthtmlcssfunction

Ways to generate arrays in Typescript

My dilemma lies in a generator method I've created that asynchronously adds items to an array, and then yields each item using yield* array at the end of the process. However, TypeScript compiler is throwing me off with an error message (TS2766) that ...

javascriptarraystypescriptasync-awaitgenerator

push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here. I have three (div) elements: two in one row and another in a separa ...

htmlcss

The function signature '(newValue: DateRange<dateFns>) => void' does not match the expected type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void' as per TypeScript rules

I'm currently utilizing the MUI date range picker from https://mui.com/x/react-date-pickers/date-range-picker/. Here's my code snippet: <StaticDateRangePickerStyled displayStaticWrapperAs="desktop" value={valu ...

javascripttypescriptmaterial-ui

What is the process of importing a cascading style sheet into a C# object?

Currently, I am working on a web application and I would like to provide users with the flexibility to change the styling elements of CSS linked to a page through an admin screen. I have been exploring ways to load a CSS file into a C# object or convert ...

c#cssobject

Can login data be transferred from the index page to other pages?

Working on a school project involving a Weather info web page has been quite the journey. Most of it is complete, except for one issue that I can't seem to figure out. The index page with login and registration functions is connected to phpmyadmin/mys ...

phphtmlauthenticationsessionregistration

Using Nuxt.js to import custom NPM packages on a global scale

The installation process for Nuxt's plugins/modules system can be quite intricate. Despite attempting to follow various suggestions, I have struggled to accomplish a seemingly simple task. After installing the NPM package csv-parse (which can be found ...

javascriptvue.jsnpmnuxt.js

Executing a function in React JS triggered by an event

Can someone help me figure out how to properly call a function from a React component within the same class? I am working with create-react-app. SomeFunction(){ return true; } handleClick(e){ SomeFunction(); // This part doesn't w ...

javascriptreactjscreate-react-app

AJAX is currently not operational

I've spent the last couple of hours trying to troubleshoot this issue with no luck. Can anyone provide any assistance? For some reason, the table fails to load when the button is clicked. Below is the relevant code snippet from my header: <head&g ...

phpjquerymysqlajaxmongodb

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

javascripthtmlvue.jsnuxt.js

What sets apart using 'self.fn.apply(self, message)' from 'self.fn(message)', and what are the advantages of using the former method?

Whenever I come across code that looks like thisnewPromise.promiseDispatch.apply(newPromise, message), I can't help but wonder why they didn't simply use newPromise.promiseDispathch(message) ...

javascriptfunction

"What is the best way to manipulate arrays in vue.js using the map function

I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...

javascriptvue.jsanime.jsvue-composition-api

Modify the behavior of the tab key using JavaScript

I'm currently working on a text editor embedded within a contenteditable div. My goal is to modify the [TAB] functionality so that instead of shifting focus to the next element (as is done by default in browsers), it will either insert spaces or a &b ...

javascript