一、LayuiTableCheckBox简介
LayuiTableCheckBox是一款基于Layui表格的多选框插件。它可以在表格中添加多选框列，并且支持全选、取消全选以及单选功能，非常方便实用。在本文中，我们将重点探讨如何使用LayuiTableCheckBox实现表格中的多选框选中功能。
二、引入LayuiTableCheckBox插件
首先，我们需要引入LayuiTableCheckBox插件。在页面中引入以下CSS和JS文件：
<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.3.0/css/layui.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="path/to/layuiTableCheckBox.css" />
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.3.0/layui.js" charset="utf-8"></script>
<script src="path/to/layuiTableCheckBox.js"></script>
这样就引入了LayuiTableCheckBox插件所需的所有文件。
三、实现多选框选中功能
接下来，我们要实现多选框选中的功能。在表格中添加多选框列的方法已在LayuiTableCheckBox的官方文档中有详细说明，这里就不做过多介绍，只介绍如何实现选中功能。我们可以在全选按钮和单选按钮的点击事件中，使用以下代码实现多选框的选中：
var checkStatus = table.checkStatus('table-id');
//全选
$('#checkAll').click(function(){
layui.each(checkStatus.data, function(index, row){
row.LAY_CHECKED = true;
});
tableRender();
});
//取消全选
$('#unCheckAll').click(function(){
layui.each(checkStatus.data, function(index, row){
row.LAY_CHECKED = false;
});
tableRender();
});
//单选
table.on('checkbox(table-filter)', function(obj){
var rowData = obj.data;
rowData.LAY_CHECKED = obj.checked;
tableRender();
});
//重绘表格
function tableRender() {
table.reload('table-id', {
data: table.cache['table-id']
});
}
在全选和取消全选按钮的点击事件中，我们通过遍历表格数据，将每一行数据的LAY_CHECKED属性都设置为true或false，从而实现全选和取消全选的功能。在单选按钮的点击事件中，我们将选中行的数据的LAY_CHECKED属性设置为当前checkbox的选中状态。最后，我们通过调用table.reload()方法，重新渲染表格，实现多选框选中的效果。
四、完整示例代码
下面是一份基于Layui官方提供的示例代码，结合LayuiTableCheckBox实现多选框选中功能的完整示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayuiTableCheckBox示例页面</title>
<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.3.0/css/layui.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="path/to/layuiTableCheckBox.css" />
</head>
<body>
<div class="layui-container">
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteSelected"><i class="layui-icon"></i></button>
</div>
</script>
</div>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.3.0/layui.js" charset="utf-8"></script>
<script src="path/to/layuiTableCheckBox.js"></script>
<script>
layui.use(['table', 'layer'], function () {
var table = layui.table;
//渲染表格
table.render({
elem: '#test',
url: '/api/test/list',
toolbar: '#toolbar',
cols: [[
{type: 'checkbox'},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'username', title: '用户名'},
{field: 'email', title: '用户邮箱'},
{field: 'sign', title: '个性签名'},
{field: 'sex', width: 80, title: '性别'},
{fixed: 'right', toolbar: '#barDemo', width:150}
]]
});
//监听头部工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'deleteSelected':
layer.msg('批量删除');
console.log(checkStatus.data);
break;
}
});
//监听行工具栏事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：
'+ JSON.stringify(data))
}
});
//选中状态改变时触发
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all；如果触发的是单选，则为：one；
console.log(table.checkStatus('test').data); //获取选中行的数据
});
//全选
$('#checkAll').click(function(){
layui.each(table.cache['test'], function(index, row){
row.LAY_CHECKED = true;
});
tableRender();
});
//取消全选
$('#unCheckAll').click(function(){
layui.each(table.cache['test'], function(index, row){
row.LAY_CHECKED = false;
});
tableRender();
});
//重绘表格
function tableRender() {
table.reload('test', {
data: table.cache['test']
});
}
});
</script>
</body>
</html>
