表单数据这一块 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. ValueError: Object arrays cannot be loaded when allow_pickle=False

    错误ValueError: Object arrays cannot be loaded when allow_pickle=False的解决     numpy最新版1.17以上版本与其他包不兼容问 ...

  3. 【Abode Air程序开发】Flex air文件打包和运行

    1 安装Adobe AIR 运行时,和java的JVM类似. Adobe AIR 运行时允许在桌面运行AIR应用程序,脱离游览器的束缚. 下载安装文件http://get.adobe.com/cn/a ...

  4. git安装配置相关

    Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目前,包括Rubinius ...

  5. 2019年9月训练(贰)区间DP (luogu 4290)

    区间DP luogu 4290 明显的区间DP. 定义 dp[l][r][k]/*表示区间[l,r]能否凑成k(W,I,N,G)字符*/mp['W']=1;mp['I']=2;mp['N']=3;mp ...

  6. Photon Server初识(二) ---通过NHibernate 映射数据库

    一.下载 NHibernate.dill 官网:https://nhibernate.info 或者通过NuGet下载(详情看上一节) 二.新建一个项目,并引入包 引入包 三.配置(重点) 1.配置x ...

  7. C# 定义热键

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. C# List.sort排序(多权重,升序降序)

    很多人可能喜欢Linq的orderBy排序,可惜U3D里面linq在Ios上会报错,所以就必须使用list的排序. 其实理解了并不难 升序降序比较 sort有三种结果 1,-1,0分别是大,小,相等. ...

  9. warning C4819 的解决方法

    编译VC++程序的时候出现如下提示警告: warning C4819: The file contains a character that cannot be represented in the ...

  10. ES6基础之——new Set

    Set 对象存储的值总是唯一的 Set 对象方法 方法 描述 add 添加某个值,返回Set对象本身. clear 删除所有的键/值对,没有返回值. delete 删除某个键,返回true.如果删除失 ...