动态html列表选中状态,layui 动态设置checbox 选中状态的例子

可以使用jQuery的prop()方法来动态设置checkbox选中状态，结合Layui的表格可以实现动态html列表选中状态。

HTML代码：

<table class="layui-table" lay-size="sm">
    <thead>
        <tr>
            <th width="50"><input type="checkbox" lay-skin="primary" lay-filter="checkAll"></th>
            <th>名称</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

JavaScript代码：

// 模拟数据
var data = [
    { id: 1, name: '商品1', price: 100 },
    { id: 2, name: '商品2', price: 200 },
    { id: 3, name: '商品3', price: 300 },
];

// 渲染表格
var html = '';
for (var i = 0; i < data.length; i++) {
    html += '<tr>';
    html += '<td><input type="checkbox" lay-skin="primary" lay-filter="checkItem" value="' + data[i].id + '"></td>';
    html += '<td>' + data[i].name + '</td>';
    html += '<td>' + data[i].price + '</td>';
    html += '</tr>';
}
$('#tableBody').html(html);

// 设置checkbox选中状态
$('input[type="checkbox"][value="2"]').prop('checked', true);

以上代码中，我们先使用模拟数据渲染了一个表格，然后通过jQuery的prop()方法来设置value为2的checkbox选中状态。注意，该方法的第二个参数为true表示选中，为false表示取消选中。