layui 全选实现（checkbox）
2019-11-14 本文已影响0人
虹猫日志
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-table">
<colgroup>
<col width="100">
<col width="200">
<col width="200">
<col width="300">
<col width="80">
</colgroup>
<thead>
<tr>
<th class="layui-form">
<input type="checkbox" lay-skin="primary" lay-filter="allChoose">
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="layui-form">
<input type="checkbox" lay-skin="primary" class="itemSelect">
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td class="layui-form">
<input type="checkbox" lay-skin="primary" class="itemSelect">
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td class="layui-form">
<input type="checkbox" lay-skin="primary" class="itemSelect">
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
<script src="../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
//layui实现全选
layui.use('form', function () {
const form = layui.form;
/*此处对应页面属性lay-filter="allChoose" allChoose可更改为任意名*/
form.on('checkbox(allChoose)', function (data) {
/*此处为匹配页面属性class="itemSelect" 可任意更换*/
$("input[class='itemSelect']").each(function () {
this.checked = data.elem.checked;
});
form.render('checkbox');
});
});
</script>
</body>
</html>
效果演示
全选
