表单数据这一块 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. 牛客练习赛53 A-E

    牛客联系赛53 A-E 题目链接:Link A 超越学姐爱字符串 题意: 长度为N的字符串,只能有C,Y字符,且字符串中不能连续出现 C. 思路: 其实就是DP,\(Dp[i][c]\) 表示长度为 ...

  2. 解决windows server 2019远程桌面许可证问题

    解决远程桌面许可证问题,你的远程桌面许可证出现问题,你的会话将在60分钟后断开. 最近装了台windows server 2019服务器做远程桌面连接,也安装了远程桌面许可证,但客户端远程连接时出现你 ...

  3. Exchange Server 2010安装

    Exchange Server 2010安装  Exchange Server 2010是Microsoft最新的邮件服务器软件,功能比较强大.在此,我们在虚拟机中安装体验一下,主要步骤如下: (1) ...

  4. vue ts ,vue使用typescript，三种组件传值方式

    参考链接:https://juejin.im/post/5c55156f6fb9a049ef270541

  5. ActiveMQ配置详解

    原文链接 一.消息目的地策略 在节点destinationPolicy配置策略,可以对单个或者所有的主题和队列进行设置,使用流量监控,当消息达到memoryLimit的时候,ActiveMQ会减慢消息 ...

  6. sql常用到的查询连接

    一.内连接(Inner Join) select * from a inner join b on a.name=b.name; 此语句的结果为同时匹配表a和表b的记录集.即内连接取的是两个表的交集. ...

  7. PHP中的闭包

    1.语句结构 在PHP中,由于存在函数内部不能访问全局作用的,所以就需要一种可以引入上一级作用域的语法结构,这种就是 function () use () {} 将需要引入到这个函数作用于内的变量写入 ...

  8. windows下将多个文件合并成一个文件，将ts文件变成MP3格式

    ①:先把全部的ts文件下载下来放到指定文件夹,这里我是放在桌面的ls里 ②:从cmd进去找到桌面的路径,也可以像我这样直接在桌面的路径上敲cmd进入: ③:直接合并使用命令“copy /b ls\*. ...

  9. ZROIDay3-比赛解题报告

    ZROIDay3-比赛解题报告 瞎扯 从今天开始考试有点不在状态,可能是因为不太适应题目的原因,T1已经接近了思想但是没有想到状态转移,T2思考方向错误,T3不会打LCT,还是太菜了 A 考场上想到要 ...

  10. luogu题解 UVA11992 【Fast Matrix Operations】

    题目链接: https://www.luogu.org/problemnew/show/UVA11992 题目大意: 一个r*c的矩阵,一开始元素都是0,然后给你m次三种操作,分别是将一个子矩阵中所有 ...