表单数据这一块 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. cocos2dx-android-添加64位编译

    Application.mk: APP_ABI := armeabi arm64-v8a build.gradle: android{ ndk{ abiFilters "armeabi&qu ...

  2. linux下配置maven并修改maven源

    参考文章 <Linux下Maven的安装与使用> <aliyun阿里云Maven仓库镜像地址> <maven国内镜像配置(Ubuntu)> 下载maven,具体目录 ...

  3. 关于python脚本头部设置#!/usr/bin/python

    今天又是贼几把菜的一天0.0 读别人程序的时候看到在python文件头部设置签名,感觉贼几把酷,自己也试着在文件前段设置了一下. 设置还是蛮简单的,设置过程如图所示. 设置后如图所示: 当然你也可能看 ...

  4. Mysql——通配符和正则表达式的使用

    1.like操作符和百分号通配符 %表示任何字符出现任意次数. 查询出表TABLE中NAME字段中任意位置包含i的行: select * from TABLE where NAME like '%i% ...

  5. spark-scala-java实现wordcount

    引入:spark-scala-java实现wordcount 1.spark-scala实现wordcount package com.cw.scala.spark import org.apache ...

  6. curl put方式上传文件

    发送端 <?php function curlPut($destUrl, $sourceFileDir, $headerArr = array(), $timeout = 10) { $ch = ...

  7. EntityFramework学习要点记一

    一.Entity的注解属性(Annotations)不管是code first还是db first,都需要用到注解属性,至于用System.ComponentModel.DataAnnotations ...

  8. 搭建自己的框架WedeNet（四）

    WedeNet2018.Web-UI层:结构如下: 首先,在Controller中定义BaseController,以便加入统一处理逻辑,如下: using log4net; using System ...

  9. java 计算中位数方法

    最近工作需要 要求把python的代码写成java版本,python中有一个np.median()求中位数的方法,java决定手写一个 先说说什么是中位数: 中位数就是中间的那个数, 如果一个集合是奇 ...

  10. Myeclipse启动后tomcat空指针异常

    今天早上吃完早餐来公司上班,打开电脑,输入密码,123456.....嗯……,再打开myeclipse,duang...duang...duang....tomcat空指针异常,tmd我这暴脾气昨天还 ...