jeudi 23 juin 2016

How to order HTML when converting to paragraph stacks


$(document).ready(function () {

    $("#knop").click(function () {

        var pizzas = ["Margherita", "Napolitana", "Salami", "Prosciutto", "Funghi", "Tonno"];
        var Prijs = ["6.00", "7.20", "7.50", "7.50", "7.00", "8.00"];

        if ($('input[name="M"]').is(":checked")) {
            $("#Pizza").html(pizzas[0]);
            $("#prijs").html(Prijs[0]);
        };
        if ($('input[name="N"]').is(":checked")) {
            $("#Pizza").html(pizzas[1]);
            $("#prijs").html(Prijs[1]);
        };
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="Pizzas container" id="checkbox_pizza">
    <h1>Kies uw Pizza.</h1>
    <form>
        <input type="checkbox" name="M" id="g" value="0"> &euro;6,00 -Margherita (Kaas en tomaten)
        <br/>
        <input type="checkbox" name="N" id="h" value="1"> &euro;7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
        <br/>
        <input type="checkbox" name="S" id="i" value=2""> &euro;7,50 -Salami (kaas, tomaten en salami)
        <br/>
        <input type="checkbox" name="P" id="j" value="3"> &euro;7,50 -Prosciutto (tomaten, kaas, ham)
        <br/>
        <input type="checkbox" name="F" id="k" value="4"> &euro;7,00 -Funghi (tomaten, kaas, champions)
        <br/>
        <input type="checkbox" name="T" id="l" value="5"> &euro;8,00 -Tonno (tomaten, kaas, tonijn, ui)
        <br/>
        <input type="button" id="knop" value="knop"/>
        <p id="Pizza"></p><p id="prijs"></p>

    </form>
</div>

Here is my html and jquery code. Now my problem is that when I have checked the first and second checkboxes and click the #knop button, I only see the second checkbox results in my <p>.

Now I know this is because of the second part of my function, but how do I get it so that both the result will show?


Aucun commentaire:

Enregistrer un commentaire