Addition de checkbox, php et javascript

2016-12-16

web Hadock 2016-12-16

Pour un site j'ai eu besoin de créer une liste d'option de vente. Ces options allaient devoir s'additionner entre elles pour donner un prix total.

Le rendu final : ici

 

Le script

function compter() {
            var somme = 0;
            var checks = document.forms["superForm"].getElementsByTagName("INPUT");
            for (var i = 0, iMax = checks.length; i < iMax; ++i) {
                if ((checks[i].type == "checkbox") && checks[i].checked) {
                    somme += 1 * checks[i].value;
                }
            }
            document.getElementById("affichage").innerHTML = somme;
        }

Pour le html noter que j'ai utilisé bootstrap.

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="img/3d.gif" alt="3d">
                <div class="caption">
                    <h3>3D, les options :</h3>
                    <form name="superForm">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" onclick="compter()" value="10" />
                                format papier : 10€
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" onclick="compter()" value="2500" />
                                navette spacial : 2500€
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" onclick="compter()" value="9800" />
                                voyage vers mars : 9800€
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" onclick="compter()" value="1.158" />
                                un croissant : 1.158€
                            </label>
                        </div>
                    </form>

                    <div class="alert alert-success" role="alert">
                        <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
                        <span id="affichage"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>