Forum : Additionner plusieurs valeurs

Bonjour,

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

<div class="test">
<input type="checkbox" id="rouge" name="rouge">
<label for="rouge">Rouge</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,

il y a 6 ans

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>