jeudi 19 novembre 2015

Jquery Checkboxes count value totaal

What i am trying to do is to show the total from each selected checkbox for example. if i select a checkbox with the value 100 and than select another with the value 200 i get 300 as output and if i deselect it it will go off the totaal i tried everything i could but no result at all need some help in this.

This is above the html I use PHP so i can change the values quicker

<?php 
    //basisprijs en titel  die erbij komen, Dit moet aangepast worden.
    $basisPrijs=
    array(
        array("titel" => 'template1', "prijs" => '100'),
        array("titel" => 'template2', "prijs" => '200'),
        array("titel" => 'template3', "prijs" => '300'),
        array("titel" => 'template4', "prijs" => '400')
    );
    //onderdelen en titel die erbij komen, Dit moet aangepast worden.
    $onderdelen=
    array(
        array("titel" => 'Table', "prijs" => '100'),
        array("titel" => 'Checkbox', "prijs" => '200'),
        array("titel" => 'List', "prijs" => '300'),
        array("titel" => 'Selectbox', "prijs" => '400')
    );
    $titel="Bereken tool";
    $check="Bestellen";
    ?>   

And this goes after the head and Jquery

 <body>
             <!-- <script type="text/javascript"></script> -->
            <div class="container">
                <div id="content">
                <h3><?php echo $titel; ?></h3>
                    <form action="index.php" method="post">
                     <div class="checkbox">
                     <?php foreach($onderdelen as $key => $value)
                        {echo "<div class='checkbox'>
                               <label><input class='check' type='checkbox' value='".$onderdelen[$key]["prijs"]."' 
                               name='".$onderdelen[$key]["titel"]."'>"
                               .$onderdelen[$key]["titel"]."</label></div>"
                        ;}?>
                    </div>
                    </form>
                    <div>
                        <button type="button" class="btn btn-default"><?php echo $check; ?></button>
                        <p id="output">output:</p>
                    </div>
                </div>
            </div> 
            <script>
        $(document).ready(function()
        { 
            $(".check").change(function()
            {

               var prijs= this.checked ? this.value : '';
                $("#output").text(prijs); 
            });

        });   
        </script>
        </body>




Aucun commentaire:

Enregistrer un commentaire