一、Layui复选框全选
Layui复选框是基于jQuery封装的组件，使用起来非常方便。在实际应用中，我们常常需要实现全选或者全不选的功能。这时，我们可以通过以下代码实现：
// 全选操作
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
// 取消全选操作
form.on('checkbox(itemChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
var flag = true;
child.each(function(index, item){
if(!item.checked){
flag = false;
}
});
$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", flag);
form.render('checkbox');
});
这段代码实现了复选框全选和取消全选的功能，并且代码非常简洁明了。
二、Layui复选框去掉对勾
有时候我们需要在页面中展示一些不可编辑的数据，此时复选框依然会有对勾，这时候我们可以使用Layui提供的form.render方法实现去掉对勾，代码如下：
//隐藏复选框对勾
layui.use(['form'], function(){
var form = layui.form;
form.render('checkbox');
$('table').on('mouseover','td div.layui-form-checkbox:first',function(){
var $checkbox = $(this).find('span:first');
$checkbox.css({'opacity': 0, 'filter': 'alpha(opacity=0)'});
});
$('table').on('mouseout','td div.layui-form-checkbox:first',function(){
var $checkbox = $(this).find('span:first');
$checkbox.css({'opacity': 1, 'filter': 'alpha(opacity=100)'});
});
});
这段代码使用了form.render方法，并且通过CSS实现了对勾的隐藏和显示。
三、Layui复选框默认选中
有时候我们需要默认选中一些复选框，这时候我们可以设置checkbox组件的lay-skin属性值为primary，并且给该复选框设置lay-checked属性，代码如下：
这段代码中，我们给男性复选框设置了checked属性并且设置了lay-skin为primary，实现了默认选中的效果。
四、Layui复选框批量删除
在实际应用中，我们经常需要处理批量删除的问题，复选框可以帮我们实现这个功能。在HTML中，我们可以这样定义：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/311388.html
微信扫一扫 
支付宝扫一扫 