layui checkbox 的使用

最新推荐文章于 2024-07-30 10:56:44 发布

QvQo。

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量5.7k

点赞数 1

分类专栏： layui 文章标签： javascript css html5

本文链接：https://blog.csdn.net/veigar_l/article/details/113836901

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

checkbox 的使用

由于layui.form的获取到的表单对象缺少多层级和数组格式的json对象，所以在使用的时候需要进行手动转化。

一、选择器方式

通过对checkbox打包成一个块，通过选择器进行操作。（比较简单）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui demo</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="0" http-equiv="Expires">
    <meta content="no-cache" http-equiv="Pragma">
    <meta content="no-cache" http-equiv="Cache-control">
    <meta content="no-cache" http-equiv="Cache">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
        name="viewport">
    <link href="layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="layuiadmin/style/admin.css" media="all" rel="stylesheet">

</head>

<body>
    <div class="layui-fluid">
        <div class="layui-form">
            <div class="layui-row layui-form-item">
                <div class="layui-inline" id='cbA'>
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" value="id1"
                        title="checkbox1" checked>
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" value="id2"
                        title="checkbox2" checked>
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" value="id3"
                        title="checkbox3">
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" value="id4"
                        title="checkbox4">
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" value="id5"
                        title="checkbox5">

                </div>
            </div>
            <div class="layui-row layui-form-item">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="aSub">提交</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="layuiadmin/layui/layui.js"></script>
    <script>
        layui.use(['form'], function () {
            let form = layui.form;
            let $ = layui.$;
            
            form.on('submit(aSub)', function (o) {
                let field = o.field;
                let arr = [];
                // 省略 input 标签的 name 的命名。
                $('#cbA').find(':checkbox:checked').each((i, x) => {
                    arr.push($(x).val());
                });
                console.log(arr);
                field['xxx'] = arr;
            });
        });
    </script>
</body>
</html>

二、再格式方式

对获取到的表单对象进行操作，转化成希望获取的格式。（稍微麻烦需要制定一些name的命名规则）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui demo</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="0" http-equiv="Expires">
    <meta content="no-cache" http-equiv="Pragma">
    <meta content="no-cache" http-equiv="Cache-control">
    <meta content="no-cache" http-equiv="Cache">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
        name="viewport">
    <link href="layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="layuiadmin/style/admin.css" media="all" rel="stylesheet">

</head>

<body>
    <div class="layui-fluid">
        <div class="layui-form">
            <div class="layui-row layui-form-item">
                <div class="layui-inline">
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" name="name[1]" value="id1"
                        title="checkbox1" checked>
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" name="name[2]" value="id2"
                        title="checkbox2" checked>
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" name="name[3]" value="id3"
                        title="checkbox3">
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" name="name[4]" value="id4"
                        title="checkbox4">
                    <input type="checkbox" class="layui-input-inline" lay-skin="primary" name="name[5]" value="id5"
                        title="checkbox5">
                </div>
            </div>
            <div class="layui-row layui-form-item">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="aSub">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script src="layuiadmin/layui/layui.js"></script>
    <script>


        layui.use(['form'], function () {
            let form = layui.form;
            
            form.on('submit(aSub)', function (o) {
                let field = o.field;
                /*
                * 将表单获取的数据转化成json对象
                *   1、添加多层级级对象转化 ‘.’
                *   2、添加数组对象转化 ‘[]’ 或 ‘[?]’ 无序
                * input name 命名规则：
                *   1、多层级级对象命名：a.b.c；注意：a.b命名格式会覆盖a.b.c、a.b.c.d的命名格式。
                *   2、数组对象命名：a[]、a[1]、a[2a]、a[abc]；注意：a[]的命名格式会覆盖a、a.b、a.b.c的命名格式
                */
                const regexp = /\[[0-9a-zA-z]*\]/;
                let n = {};
                let t;
                let arr;
                let y;
                let z;
                let v;
                for (const x in field) {
                    v = field[x];
                    t = n;
                    arr = x.split('.');
                    for (let i = 0; i < arr.length; i++) {
                        y = arr[i];
                        if (i + 1 === arr.length) {
                            if (regexp.test(y)) {
                                z = y.split('[')[0];

                                if (!t[z] || !(t[z] instanceof Array)) {
                                    t[z] = [];
                                }

                                t[z].push(v);
                            } else {
                                t[y] = v;
                            }
                        } else {
                            if (!t[y]) {
                                t[y] = {};
                            }
                            t = t[y];
                        }
                    }
                }
                // 这里的n即格式化后的field对象
                console.log(n);
            });
        });
    </script>
</body>
</html>

QvQo。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
layui checkbox 的使用

checkbox 的使用由于layui.form的获取到的表单对象缺少多层级和数组格式的json对象，所以在使用的时候需要进行手动转化。一、选择器方式通过对checkbox打包成一个块，通过选择器进行操作。（比较简单）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui demo</title> <meta conten
复制链接

扫一扫