标签:checkbox checked form 取消 prop item 全选 var
https://blog.csdn.net/qq_16513911/article/details/81513790
在用layui写后台admin管理系统的时候,表格的全选与反选是不好实现的,纵观很多博主,发现如上博主的写法是比较可取的,虽然离理想的全选反选功能还是差一些,但也是可取的。用以记录。
<div class="layui-form-item">
<label class="layui-form-label">站点</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="primary" id="c_all" lay-filter="c_all" title="全部">
<input type="checkbox" lay-skin="primary" id="f_all" lay-filter="f_all" title="反选">
<br/><br/>
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="北京" value="10001">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="测试" value="10002">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="西安" value="10003">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="常州" value="10004">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="肇庆" value="10005">
</div>
</div>
layui.use('form', function () {
var form = layui.form;
//全选
form.on('checkbox(c_all)', function (data) {
var a = data.elem.checked;
if (a == true) {
$(".cityId").prop("checked", true);
form.render('checkbox');
} else {
$(".cityId").prop("checked", false);
form.render('checkbox');
}
});
//反选
form.on('checkbox(f_all)', function (data) {
var item = $(".cityId");
item.each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
form.render('checkbox');
});
//有一个未选中全选取消选中
form.on('checkbox(c_one)', function (data) {
var item = $(".cityId");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#c_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾选了 勾上全选
var all=item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if(all==0){
$("#c_all").prop("checked", true);
form.render('checkbox');}
});
});
更新版。。。虽然并没有觉得更好用
<input type="checkbox" name="close" lay-skin="switch" id="c_all" lay-filter="switchTest" lay-text="全不选|全选">
<input type="checkbox" name="close" lay-skin="switch" id="c_boolean" lay-filter="c_boolean" lay-text="反选|反选">
layui.use('form', function () {
var form = layui.form;
//全选 全不选
form.on('switch(c_boolean)', function (data) {
var item = $(".cityId");
item.each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
form.render('checkbox');
})
//有一个未选中 取消全选
form.on('checkbox(c_one)', function (data) {
var item = $(".cityId");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#c_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾选了 勾上全选
var all=item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if(all==0){
$("#c_all").prop("checked", true);
form.render('checkbox');}
});
//反选
form.on('switch(switchTest)', function(data){
if(this.checked){
var a = data.elem.checked;
if (a == true) {
$(".cityId").prop("checked", true);
form.render('checkbox');
} else {
$(".cityId").prop("checked", false);
form.render('checkbox');
}
}else{
var item = $(".cityId");
item.each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
form.render('checkbox');
}
});
});
我自己的,完整的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href=" https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>
<title>Document</title>
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">站点</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="primary" id="c_all" lay-filter="c_all" title="全部">
<input type="checkbox" lay-skin="primary" id="f_all" lay-filter="f_all" title="反选">
<br/><br/>
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="北京" value="10001">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="测试" value="10002">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="西安" value="10003">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="常州" value="10004">
<input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="肇庆" value="10005">
</div>
</div>
</div>
</body>
</html>
<script>
//Demo
layui.use(['jquery', 'form'], function () {
var $ = layui.$ //重点处
, form = layui.form;
//全选
form.on('checkbox(c_all)', function (data) {
var a = data.elem.checked;
if (a == true) {
$(".cityId").prop("checked", true);
form.render('checkbox');
} else {
$(".cityId").prop("checked", false);
form.render('checkbox');
}
});
//反选
form.on('checkbox(f_all)', function (data) {
var item = $(".cityId");
item.each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
form.render('checkbox');
});
//有一个未选中全选取消选中
form.on('checkbox(c_one)', function (data) {
var item = $(".cityId");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#c_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾选了 勾上全选
var all=item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if(all==0){
$("#c_all").prop("checked", true);
form.render('checkbox');}
});
});
</script>
标签:checkbox,checked,form,取消,prop,item,全选,var 来源: https://blog.csdn.net/lsx19981201/article/details/87884542
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。