jquery 在一个div中手动追加全选和下拉框多选

//循环数据

  var customerData = [
    {
        "key": "1",
        "val": "客户1",
    },
    {
        "key": "2",
        "val": "客户2",
    }
];

$(document).ready(function() {
    console.log('进入页面了吗')
    // 动态生成复选框
    //方法1
    $.each(customerData, function(index, customer) {
        var checkbox = $('<input>').attr({
            type: 'checkbox',
            value: customer.key // 使用key作为复选框的值
        });
        var label = $('<label>').append(checkbox, customer.val); // 使用val作为复选框的文本
        var div = $('<div>').append(label);
        console.log('div',div)
        $('#selectOptions').append(div);
    });
   //方法2
    var selectOptionshtml=''
    for (var i = 0; i < customerData.length; i++) {
        selectOptionshtml += '<div>\n' +
            '    <label>\n' +
            '        <input type="checkbox" value="' + customerData[i]['key'] + '">' + customerData[i]['val'] +'\n' +
            '    </label>\n' +
            '</div>';
    }
    $('#selectOptions').append(selectOptionshtml);

    // 全选功能
    $('#selectAllCheckbox').change(function() {
        $('#selectOptions input[type="checkbox"]').prop('checked', $(this).prop('checked'));
    });
});

2个方法都可以实现。习惯哪个是哪个吧 。

结果就是展示为

<div id="selectAllCheckbox">
    <div>
        <label>
            <input type="checkbox" value="101160">客户1
        </label>
    </div>
    <div>
        <label>
            <input type="checkbox" value="101154">客户2
        </label>
    </div>
    <!-- 其他循环生成的div -->
</div>