Additionner plusieurs valeurs

Anas Zrs
Javascript

Bonjour,

Je voudrais mettre un nombre à un checkbox puis l'additionner à d'autres checkbox.

<div class="test">
<input type="checkbox" id="rose" name="rose">
<label for="rose">Rose</label>
<img src="">
</div>

<div class="test">
<input type="checkbox" id="vert" name="vert">
<label for="vert">Vert</label>
</div>

<div class="test">
<input type="checkbox" id="rouge" name="rouge">
<label for="rouge">Rouge</label>
</div>

<div class="test">
<input type="checkbox" id="bleu" name="bleu">
<label for="louie">Bleu</label>
</div>

<div class="test">
<input type="checkbox" id="jaune" name="jaune">
<label for="jaune">Jaune</label>
</div>

Admettons que je coche le jaune et le bleu, je voudrais que sa additionne les prix des deux (qu'on aura définit auparavant) puis afficher le total.

Merci

1 réponse

vernet

Bonsoir,
Il faut pour celà recuperer l'ensemble des checkbox et ajouter à ceux un ecouteur d'évènements de changement, puis mettre à jour notre resultat lorsqu'il y a un changement.

<!DOCTYPE html>
<html>
<body>

<div>
  <input type="checkbox" class="color" id="rose" value="1">
  <label for="rose">Rose</label>
</div>

<div>
  <input type="checkbox" class="color" id="vert" value="2">
  <label for="vert">Vert</label>
</div>

<div>
  <input type="checkbox" class="color" id="rouge" value="3">
  <label for="rouge">Rouge</label>
</div>

<div>
  <input type="checkbox" class="color" id="bleu" value="4">
  <label for="bleu">Bleu</label>
</div>

<div>
  <input type="checkbox" class="color" id="jaune" value="5">
  <label for="jaune">Jaune</label>
</div>

<div>
    Résultat : <span id="result">0</span>
</div>

<script>
const color = document.getElementsByClassName("color");
for (element of color) {
  element.addEventListener("change", (event) => {
    let result = +document.getElementById("result").innerHTML;
    const value = +event.target.value;
    result = event.target.checked ? (result + value) : (result - value);
    document.getElementById("result").innerHTML = result;
  });
}
</script>

</body>
</html>