Question

＆＃13;

$(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]);
        };
    });
});

＆＃13;

<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>

＆＃13;

这是我的html和jquery代码。现在我的问题是，当我选中第一个和第二个复选框并单击#knop按钮时，我只看到第二个复选框结果在我的<p>。

现在我知道这是因为我的函数的第二部分，但我如何得到它以便结果显示？

Answer 1

要显示两个选中的项目，请使用以下选项
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>');
    };

使用.html（）覆盖第一个html内容

您可以使用append（）附加任何已检查的内容，使用

        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]);
        };

追加的代码 - http://codepen.io/nagasai/pen/ezBMeN

如何在转换为段落堆栈时订购HTML

1 个答案: