layui表单checkbox 全选/反选/取消全选功能实现

layui表单checkbox 全选/反选/取消全选功能实现 代码如下： div class="layui-form-item" pane=""label class="layui-form-label"商品/labeldiv class="layui-input-block" style="width: 1000px;"input type="checkbox" name="" title="全选" lay-skin="tag" lay-filter="selectAll"input type="che

layui表单checkbox 全选/反选/取消全选功能实现

代码如下： 

<div class="layui-form-item" pane="">
<label class="layui-form-label">商品</label>
<div class="layui-input-block" style="width: 1000px;">
<input type="checkbox" name="" title="全选" lay-skin="tag" lay-filter="selectAll">
<input type="checkbox" name="" title="取消全选" lay-skin="tag" lay-filter="noselectAll">
<input type="checkbox" name="" title="反选" lay-skin="tag" lay-filter="reverse">
<br/>
<div class="seach-box">
<ul>
<li>
<input type="checkbox" name="goods[]" value="A" lay-skin="primary" title="A套餐">
</li>
<li>
<input type="checkbox" name="goods[]" value="B" lay-skin="primary" title="B套餐">
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form,
layer = layui.layer;
var $ = layui.jquery;
// 全选： 勾选时即是全选；勾选后再取消，即为取消全选。
form.on('checkbox(selectAll)', function (data) {
var child = $(".seach-box input[type=checkbox]");
child.each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
})
// 反选
form.on('checkbox(reverse)', function (data) {
var child = $(".seach-box input[type=checkbox]");
child.each(function (index, item) {
item.checked = !item.checked;
});
form.render('checkbox');
})
// 取消全选； 这段代码未测试，仅供参考
form.on('checkbox(noselectAll)', function (data) {
var child = $(".seach-box input[type=checkbox]");
child.each(function (index, item) {
item.checked = !data.elem.checked;
});
form.render('checkbox');
})
});
</script>

全选部分： 

代码步骤解释如下：
给表单中的名为"selectAll"的复选框绑定了一个事件监听器。
通过选择器找到所有class为"seach-box"下的复选框元素。
使用each()方法遍历每个复选框元素。
将每个复选框元素的checked属性设置为data.elem.checked，即全选/全不选的状态。
使用form.render('checkbox')方法重新渲染复选框。

反选部分：

这段代码的功能是当一个复选框被点击时，将所有子复选框的选中状态反转。 代码步骤解释如下：
通过  form.on('checkbox(reverse)', function (data) { ... })  绑定一个事件处理函数，当名为 "checkbox(reverse)" 的复选框被点击时触发。
使用 $(".seach-box input[type=checkbox]") 选择所有具有类名 "seach-box" 的子元素中的复选框。
使用  child.each(function (index, item) { ... })  遍历每一个子复选框。
在遍历中，通过  item.checked = !item.checked  将每个子复选框的选中状态取反。
最后，使用  form.render('checkbox')  更新渲染复选框的样式。