How to get the sum of items selected in javascript with radio buttons

Question

I have four groups of items which can be selected by clicking a radio button. Each group have a proper input name and one element can be selected in a group. I want to get the total sum of selected items.

<input id="montant_commande" type="text" name = "total" value = "0"/><br/>

<input type="radio" name = "Entree" />
<input type="radio" name = "Entree" />
<input type="radio" name = "Entree" />

<input type="radio" name = "Plats" />
<input type="radio" name = "Plats" />
<input type="radio" name = "Plats" />

<input type="radio" name = "Desserts" />
<input type="radio" name = "Desserts" />
<input type="radio" name = "Desserts" />

<input type="radio" name = "Boissons" />
<input type="radio" name = "Boissons" />
<input type="radio" name = "Boissons" />

Can you provide me a way to achieve that?

I've tried some javascript codes that do this: - adding the price (concatenate) on every click in a group instead of adding one price (one item can be selected in a group).

<script type="text/javascript">
window.onload = function() {
    let somme = 0;
    var montant_commande =  document.getElementById('montant_commande');

    var Entree = document.getElementsByName('Entree');
    var Plats = document.getElementsByName('Plats');
    var Desserts = document.getElementsByName('Desserts');
    var Boissons = document.getElementsByName('Boissons');

    for(var i = 0; i < Entree.length; i++){
        Entree[i].addEventListener('change', function() {
            if(this.checked){
                updatePrix(2000);
            }
        });
    }
    for(var i = 0; i < Plats.length; i++){
        Plats[i].addEventListener('change', function() {
            if(this.checked){
                updatePrix(5000);
            }
        });
    }
    for(var i = 0; i < Desserts.length; i++){
        Desserts[i].addEventListener('change', function() {
            if(this.checked){
                    updatePrix(3000);
            }
        });
    }
    for(var i = 0; i < Boissons.length; i++){
        Boissons[i].addEventListener('change', function() {
            if(this.checked){
                updatePrix(1000);
            }
        });
    }

    function updatePrix(total){
        somme += total;
        montant_commande.value = somme;
    }
}
</script>

I expect that : in a group, one element can be selected so no concatenation of the total sum while clicking others in the same group to select an item.

Answer 1

I made the following snippet based on your provided code. Here is what I did:

1. Added a form element so as to loop over the radio inputs once
2. Added the price to the radio's value attribute to generalize the calculation
3. Changed the updatePrix function to calculate the total when any input is changed

let myForm = document.myForm;
for (var i = 0; i < myForm.length; i++) {
  if (myForm[i].type === 'radio') {
    myForm[i].addEventListener('change', function() {
      updatePrix();
    });
  }
}

function updatePrix() {
  let somme = 0;
  let montant_commande =
    document.getElementById('montant_commande');

  for (var i = 0; i < myForm.length; i++) {
    if (myForm[i].type === 'radio' && myForm[i].checked) {
      somme += parseInt(myForm[i].value, 10);
      montant_commande.value = somme;
    }
  }
}

<form name="myForm">
  <input id="montant_commande" type="text" name="total" value="0" /><br/>
  <input type="radio" name="Entree" value="2000" />Entree 1<br />
  <input type="radio" name="Entree" value="2000" />Entree 2<br />
  <input type="radio" name="Entree" value="2000" />Entree 3<br />
  <input type="radio" name="Plats" value="5000" />Plats 1<br />
  <input type="radio" name="Plats" value="5000" />Plats 2<br />
  <input type="radio" name="Plats" value="5000" />Plats 3<br />
  <input type="radio" name="Desserts" value="3000" />Desserts 1<br />
  <input type="radio" name="Desserts" value="3000" />Desserts 2<br />
  <input type="radio" name="Desserts" value="3000" />Desserts 3<br />
  <input type="radio" name="Boissons" value="1000" />Boissons 1<br />
  <input type="radio" name="Boissons" value="1000" />Boissons 2<br />
  <input type="radio" name="Boissons" value="1000" />Boissons 3<br />
</form>