复选框全部选中

Question

我有数据循环，数据根据ID循环，我在选择复选框时感到困惑，尤其是在所有属性列表中，这样其他ID的项目就不会进入检查列表，如何解决？

我使用append循环html标签，这是JavaScript代码：

clik here

Answer 1

从问题上来说，我认为OP仅需要选中和取消选中子复选框，而选中/取消选中所有复选框，所以我可以通过以下方式做到这一点。

$(function() {

    /*JSON data*/
    var data = {
        "dataorder": [{
                "orderid": "458LYY54",
                "ttl": 1543917803808,
                "items": [{
                        "name": "Chicken Wings",
                        "qty": 2,
                        "note": "Extra Pedas"
                    },
                    {
                        "name": "Cheese Burger",
                        "qty": 1,
                        "note": "Extra Cheese"
                    },
                    {
                        "name": "Coca Cola",
                        "qty": 1,
                        "note": "-"
                    },
                    {
                        "name": "Lemon Tea",
                        "qty": 1,
                        "note": "-"
                    }
                ]
            },
            {
                "orderid": "458LYY55",
                "ttl": 1543918080891,
                "items": [{
                        "name": "Teriyaki Chicken Rice",
                        "qty": 1,
                        "note": "Pedas"
                    },
                    {
                        "name": "Orange Dink",
                        "qty": 1,
                        "note": "-"
                    }
                ]
            },
            {
                "orderid": "458LYY56",
                "ttl": 1543918080891,
                "items": [{
                        "name": "Paket Nasi 3",
                        "qty": 2,
                        "note": "-"
                    },
                    {
                        "name": "French Fries",
                        "qty": 1,
                        "note": "-"
                    },
                    {
                        "name": "Fanta",
                        "qty": 1,
                        "note": "-"
                    },
                    {
                        "name": "Coca Cola",
                        "qty": 1,
                        "note": "-"
                    }
                ]
            }
        ]
    };
    /*Looping item*/
    var html = '';
    var all = 10;
    for (var i = 0; i < all; i++) {
        var list = '';
        html += '<div class="col-md-3">';
        html += '<div class="card mt-2 ml-2">';

        if (i < data.dataorder.length) {
            var dataor = data.dataorder[i];
            html += '<div class="card-header"><input title="toggle all" type="checkbox" class="selectall"><b class="ml-2">' + dataor.orderid + ' </b></b><p class="float-right"> ' + dataor.ttl + '</p></div> <ul class="list-group overflow-box" id="list1">';
            for (j = 0; j < dataor.items.length; j++) {
                list += '<li class="list-group-item"><p><input type="checkbox" class="individual"><b class="ml-2">' + dataor.items[j].name + '</b><b class="float-right">' + dataor.items[j].qty + '</b></p><small id="emailHelp" class="form-text text-muted ml-4">' + dataor.items[j].note + '</small></li>';
            }
        }

        html += list;
        html += '</ul>';
        html += '</div>';
        html += '</div>';
    }

    $(".row").append(html);



    /* toggle all checkboxes in group */
    $(".selectall").click(function() {
      //$(".individual").prop("checked", $(this).prop("checked"));//changed
      
      $(this).parents('.card').find(".individual").prop("checked", $(this).prop("checked"));
    });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='row'>

</div>