Ttech Ttech - 5 months ago 13
HTML Question

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?

Answer

To display both checked items ,use below option
codepen- http://codepen.io/nagasai/pen/zBoWwv

    if ($('input[name="N"]').is(":checked")) {
        $("#Pizza").html(pizzas[1]);
        $("#prijs").html(Prijs[1]);
    };
    if ($('input[name="M"]').is(":checked")) {
        $("#Pizza").prepend('<p>'+pizzas[0]+'</p>');
        $("#prijs").prepend('<p>'+Prijs[0]+'</p>');
    };

Using .html() is overwriting the first html content

You can use append() to append whatever checked ,use

        if ($('input[name="M"]').is(":checked")) {
            $("#Pizza").html(pizzas[0]);
            $("#prijs").html(Prijs[0]);
        };

            if ($('input[name="N"]').is(":checked")) {
            $("#Pizza").append(pizzas[1]);
            $("#prijs").append(Prijs[1]);
        };

Codepen for append - http://codepen.io/nagasai/pen/ezBMeN

Comments