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

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

引入外部文件

    <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 !

相关文章
Layui 内置方法 - layer.confirm(询问框)
Layui 内置方法 - layer.confirm(询问框)
1786 0
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
282 0
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
1046 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
906 0
Layui 内置方法 - layer.msg(提示框)
Layui 内置方法 - layer.msg(提示框)
1110 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2004 0
|
数据格式
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
1386 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
2325 0
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
643 0
|
11月前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
2326 1