表单数据这一块 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. java知识随笔整理-Oracle存储过程优缺点

    优点: 1.存储过程可以使得程序执行效率更高.安全性更好. 2.建立过程不会很耗系统资源,因为过程只是在调用才执行. 3.存储过程可以用于降低网络流量,存储过程代码直接存储于数据库中,所以不会产生大量 ...

  2. linux下vi编辑器常用命令

    最近折腾云主机centOS,不得不接触到各种命令,特别是vi编辑器. 时常悔恨当时没好好听金老伯的linux课,导致现在操作命令用的十分生疏,甚至跳转行首行尾都要查一查才知道. 所以〒▽〒有了下面这篇 ...

  3. Javascript去掉base64中的回车换行

    给天津海关开发手机插件. 他们的API返回的文件base64遵循了RFC822规定,即BASE64编码每76个字符,还需要加上一个回车换行. 这就导致了我的Ant Design Mobile图片控件不 ...

  4. ale.js 对比其他框架

    欢迎!我们相信你来这里的目的就是为了解 Ale 与其他大型框架的区别,这也正是我们想要在此回答的. 客观来说,作为 Ale 的核心开发者,我们肯定会更偏爱 Ale,认为对于某些问题来讲用 Ale 解决 ...

  5. type()，dir()，getattr()，hasattr(), isinstance()用法

    1.type(变量)  --->输出变量的类型int.float.str or others: 2.dir()   ----> dir() 函数不带参数时,返回当前范围内的变量.方法和定义 ...

  6. ubuntu 系统升级

    1.更新软件源和软件 $ sudo apt-get update && sudo apt-get dist-upgrade 2.安装update-manager-core $ sudo ...

  7. Java EE HttpServletRequest接口和HttpServletResponse接口

    package javax.servlet.http (https://docs.oracle.com/javaee/7/api/javax/servlet/http/package-summary. ...

  8. websocket vue

    /* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...

  9. XML转换成DataTable

    #region XML转dataset //str 是xml字符串 public static DataTable GetResultXMLToDataTable (string str,string ...

  10. MyBatis-plus 新增实例，主键ID从很大的数字开始

    mybatis-plus是mybatis增强版,用mybatis-plus可以省去很多DAO层代码和数据库操作语句的编写.但是需要我们配置好条件. 情景: 向数据库新增一条实例,我们要调用 inser ...