摘要：
Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，... Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。
layui框架是为web开发人员打造的一个前端框架，支持你所能用到的所有浏览器，包含了大量的html、css和js组件，别看组件多，它依然属于轻量级框架，使用的难度很小，但是每一处都是经过细心处理过的，质量和速度都会有保证，非常适合快速开发界面。
HTML代码
<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">可见班级</label> <input type="checkbox" name="" lay-skin="primary" id="class_all" lay-filter="class_all" title="全选"> <div class="layui-input-block" id="check"> <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600110" value="600110"> <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600120" value="600120"> <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600130" value="600130"> <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600140" value="600140"> <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600150" value="600150"> </div> </div> </form> <button id="btn" class="layui-btn">提交</button>
javascript代码
layui.use(['form'], function () {
let form = layui.form;
//全选
form.on('checkbox(class_all)', function (data) {
var a = data.elem.checked;
if (a == true) {
$(".class_one").prop("checked", true);
form.render('checkbox');
} else {
$(".class_one").prop("checked", false);
form.render('checkbox');
}
});
//有一个未选中全选取消选中;
form.on('checkbox(class_one)', function (data) {
var item = $(".class_one");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#class_all").prop("checked", false);
form.render('checkbox');
}
}
});
});
$(function () {
$("#btn").click(function () {
var checkValue = [];
$('#check input[type=checkbox]:checked').each(function () {
checkValue.push($(this).val());
});
if (checkValue == "") {
alert("请选择选项!");
return false;
} else {
console.log(checkValue);
}
})
})
