表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码

#贴上代码

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>Layui 监听 复选框 提价表单</title>

    <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/>

</head>

<body>

<form class="layui-form p-3" autocomplete="off" οnsubmit="return false">

    <div class="layui-form-item">

        <label class="layui-form-label">复选框</label>

        <div class="layui-input-inline">

            <input type="text" name="number" value="0,1,3,4,5,6," disabled>

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

            <input type="checkbox" lay-filter="number" lay-skin="primary" value="" title="">

        </div>

    </div>

</form>

<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script>

<script>

    layui.use(['form', 'laydate'], function () {

        var $ = layui.$//Jquery

            , form = layui.form;//表单

        //页面加载的时候就初始几个值

        initValue();

        //监听复选框

        form.on('checkbox(number)', function (data) {

            var number = $('input[name="number"]'), value = data.value, array = number.val().split(",");

            if (data.elem.checked) {

                number.val(number.val() + value + ",");

            } else {

                var newnumber = "";

                for (var i = ; i < array.length; i++) {

                    var str = array[i];

                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";

                }

                number.val(newnumber);

            }

        });

        /**

         * input 框初始 赋值 到checkedbox上

         * @author lengff

         */

        function initValue() {

            var param=$("input[name='number']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");

            for (var i = ; i < array.length; i++) {

                for (var j = ; j < checkBoxs.length; j++) {

                    var checkbox = $(checkBoxs[j]);

                    if (checkbox.val() == array[i]) {

                        checkbox.attr('checked','checked');

                        break;

                    }

                }

            }

            form.render('checkbox');

        }

    });

</script>

</body>

</html>

Layui 监听 复选框 提交表单的更多相关文章

  1. layui监听复选按钮点击

    layui.form.on('checkbox(resultQuery)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 c ...

  2. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  3. layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. JEECG弹出框提交表单

    一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...

  5. 依赖layui form模块 复选框tree插件（拓展可根据属性单选还是多选，数据反选）

    近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...

  6. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  7. 入门：HTML表单与Java 后台交互(复选框提交)

    仅仅给出部分关键代码: HTML form code: <form action="JavaFormTest" method="post" name=&q ...

  8. layui 数据表格复选框实现单选功能

    //点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-tab ...

  9. 前台checkbox复选框提交到后台处理

    前台 <input type="hidden" id="tempString" name="tempString" /> < ...

随机推荐

  1. phpstudy批量getshell工具

    phpstudy批量getshell工具,最新phpstudygetshell,配合精确采集实现每天轻松上万! 详情可加QQ:1743685523

  2. 两表拼接 pd.concat

    a = pd.DataFrame([[1,2,3], [4,5,6], [7,8,9]],columns=['a','b','c']) b = pd.DataFrame([[11,23,45], [2 ...

  3. Django-DRF(路由与扩展功能)

    一. 视图集与路由的使用 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update( ...

  4. GAN（生成对抗网络）之keras实践

    GAN由论文<Ian Goodfellow et al., “Generative Adversarial Networks,” arXiv (2014)>提出. GAN与VAEs的区别 ...

  5. Data Exfiltration with DNS in MSSQL SQLi attacks

    DNS解析过程 DNS解析过程 DNS 查询的过程如下图1所示. 图1 文字举例说明: 假定浏览器想知道域名xprp8i.dnslog.cn的IP地址. 1.浏览器先向本地DNS服务器进行递归查询. ...

  6. kafka修改topic副本数

    工作案例: 大数据开发用系统脚本自动在kafka建topic,检查后才发现副本数只有1个,存在数据丢失的风险.需要立刻把副本数改为3个. 开始干活,首先想到的是下面的命令: ${BIN_PATH}/k ...

  7. [转帖]如何在VirtualBox中运行macOS Catalina Beta版本

    如何在VirtualBox中运行macOS Catalina Beta版本 secist2019-08-03共2179人围观系统安全 https://www.freebuf.com/articles/ ...

  8. 基于.NET架构的树形动态报表设计与应用

    在一些统计报表中,利用树形结构报表来实现维度钻取功能是十分常见的.通过逐级钻取,可以快速查看更细粒度的指标数据,如项目施工进度报告等. 使用葡萄城报表控件——ActiveReports ,即可轻松设计 ...

  9. 洛谷P1603 斯诺登的密码（水题

    不知道什么时候打开的,随手做掉了,没什么用...大概又熟悉了一下map吧...大概........一开始还因为没读清题没把非正规的英文表示数字存进去wa了...orz最近状态不行 题目描述 题目描述 ...

  10. C++学习 之 程序的组成部分（部分知识笔记）

    1.预处理器编译指令#include: 预处理器是在程序编译前运行的工具.预处理器编译指令是向预处理器发送的命令,总是以#为标识,include便是其中常见的一种,用于引用文件,比如:iostream ...