How to get the value of one checkbox on click? every checkbox is saved in one Object on this case

JavaScript
#1

i have the following arr with many objects inside . as a Following Exemplo:

var availableCost = [{cost: " $200"}, {cost: " $100"}];  //(every checkbox has saved as an Object

sumCosts = availableCost.reduce((s, o) => s+ +o.cost.match(/[\d.]+/), 0);

//if i do like this and then i check one checkbox, it will sum all values in this case $200 + $100 = 300
i tried already with for…in
Now, what i want to do with this is: for every checkbox checked == true, get this value. Just the currently checked Checkbox value(in this case value is the label: $100<label><input type="checkbox" name="js-libs"> $100</label>)
i want to get that numbers to sum and display the total amount later.

#2

I would leave all of the values in HTML. Don’t store the data in JS, that’s just asking for pain. The steps I would follow:

  1. List your values in HTML
  2. Get references to each element in JS
  3. Add an event listener to each one that adds its value to some total when checked, subtracts when unchecked.
  4. Update the total every time a box is clicked.

Here’s my attempt if you don’t want to figure it out yourself

1 Like
#3

Thank you very much for the answer! on this exercise we are not allowed to make changes on HTML :-(:sweat:
hier you can see the code i wrote: hier i i have the error: Uncaught TypeError: activitiesCheckboxes.addEventListener is not a function

https://codepen.io/Alanes/pen/yPwJRM

on this code what i did is:

1.- selected all the label from a Form, so that i can split the the Text inside on it.
2.- created empty array to save the data, from label text, on it, when user check the boxes.

And what i want to do:
3.- Now what i want to do a change eventhandler:
a: checkbox is checked -> get the label text end divide in 3 things: Events, Days with the Times and finally the costs.
b: to prove if the selected activities are not at the same Time and to the end of selected activities show the
Total Price

Hier you can see how i convert my string numbers and a numbers, so that i can use that string number for a sume later wenn the checkboxes are checked.

let sumCost = availableCost.reduce((s, o) => s+ +o.cost.match(/[\d.]+/), 0);
console.log(sumCost);

i don’t have to much expereiences width javascript and now i just stack for a weeks on this exercise…

#4

If you use querySelectorAll, you’re getting a node list, which is like an array. You can’t add an event listener to that, you have to iterate through the list and add the event listener to each node individually.

I won’t give you a working solution to what is clearly some sort of homework exercise, but think about getting an event listener on each checkbox so you can get the inner text as you click on it rather than getting all of the text at once and trying to sort through it.

1 Like
#5

hello PortableStick; thank you for the advice ! until now it works perfect! :slight_smile: the eventlistener is now on each checkbox and just if the checkbox is checked the inner text will be sort just on each checkbox checked. but now the problem is:
i don’t how to beginn to remove the inner text sort if it is unchecked. :sweat_smile:

could you give me some advice? i know that i need an if and else statement id did already an if but i don’t know how to do an else statment …
here is what already did:

https://codepen.io/Alanes/pen/yPwJRM?editors=1011

thank you in advance

#6