Count checked checkboxes and perform operation

Question

I have the following codes: the first checkbox is equivalent to the additional ones that are worth 2 real and the second to those that are worth 4 real.

Additional 2 reais:

<input type="checkbox" />Morango
<input type="checkbox" />Ninho
<input type="checkbox" />Uva

Additional 4 reais:

<input type="checkbox" />Nutella
<input type="checkbox" />Bis
<input type="checkbox" />Kit Kat

Through javascript, how can I count how many checkboxes were selected in the extra 2 real and count how many were selected in the additional 4 real and add the results of the two counts?

Note: It will not be necessary to codar for me, just say what I can do, but if you want, feel free...

Answer 1

You can simply count using a selector that selects checkbox type input that is "checked", like this:

document.querySelectorAll('input[type="checkbox"]:checked').length

It turns out that in your case there is no way to distinguish between the R$2 checkbox and the R$4 checkbox, so I suggest using a class, or name to distinguish:

document
  .getElementById("contar")
  .addEventListener("click", function(){
    var doisReais = document.querySelectorAll('input[name="dois"][type="checkbox"]:checked').length;

    var quatroReais = document.querySelectorAll('input[name="quatro"][type="checkbox"]:checked').length;

    var total = (doisReais * 2) + (quatroReais * 4);

    console.log("Total de R$2: " + doisReais);
    console.log("Total de R$4: " + quatroReais); 
    console.log("Total: R$" + total);
});

Adicionais de 2 reais:
<input name="dois" type="checkbox" />Morango
<input name="dois" type="checkbox" />Ninho
<input name="dois" type="checkbox" />Uva
<br/>
Adicionais de 4 reais:

<input name="quatro" type="checkbox" />Nutella
<input name="quatro" type="checkbox" />Bis
<input name="quatro" type="checkbox" />Kit Kat

<br />
<button id="contar">Contar</button>