0
点赞
收藏
分享

微信扫一扫

layui复选框checkbox全选和获取值的解决方案

Mhhao 2022-01-31 阅读 60
cssjqueryi++


引入外部文件

<script src="../js/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">

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);
}

})
})

Done !



举报

相关推荐

0 条评论