zoukankan      html  css  js  c++  java
  • Layui 监听 复选框 提交表单

    表单数据这一块 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="0" title="0">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="1" title="1">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="2" title="2">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="3" title="3">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="4" title="4">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="5" title="5">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="6" title="6">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="7" title="7">
                <input type="checkbox" lay-filter="number" lay-skin="primary" value="8" title="8">
            </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 = 0; 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 = 0; i < array.length; i++) {
                    for (var j = 0; j < checkBoxs.length; j++) {
                        var checkbox = $(checkBoxs[j]);
                        if (checkbox.val() == array[i]) {
                            checkbox.attr('checked','checked');
                            break;
                        }
                    }
                }
                form.render('checkbox');
            }
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    PDF文件中的Form保存问题
    Understanding IP Fragmentation
    tcp ip guide IPsec IKE
    Windows安全事件日志中的事件编号与描述
    Cisco PIX fix up and Juniper firewall FTP ALG
    很好的IPSec介绍,详细解释了IKE协商的2个阶段的作用
    virtualbox 下运行Ubuntu 8.10的分辨率和guest additions的问题。
    Fixing the ‘Do you want to display nonsecure items’ message
    windows xp 开始菜单里面所有项目右键不起作用。
    HP backup and recovery manager
  • 原文地址:https://www.cnblogs.com/bluealine/p/11537164.html
Copyright © 2011-2022 走看看