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="" 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 监听 复选框 提交表单的更多相关文章
- layui监听复选按钮点击
layui.form.on('checkbox(resultQuery)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 c ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- JEECG弹出框提交表单
一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...
- 依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)
近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...
- 入门:HTML表单与Java 后台交互(复选框提交)
仅仅给出部分关键代码: HTML form code: <form action="JavaFormTest" method="post" name=&q ...
- layui 数据表格复选框实现单选功能
//点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-tab ...
- 前台checkbox复选框提交到后台处理
前台 <input type="hidden" id="tempString" name="tempString" /> < ...
随机推荐
- slice详解
- Mac 安装Mysql 之 Sqlservice 区别
Mysql 一.下载mysql 官网“Community “ 下会看到“MySQL Community Server”下方有一个“download”点击. 在Mac OS上的MySQL的版本 ...
- CSS - Animate动画
下载地址:https://daneden.github.io/animate.css/ 关键CSS样式:animate.css 引入CSS样式 <link rel="styleshee ...
- Linux三剑客之sed深度实践讲解(下)
2.3.4分组替换 \( \) 和\1的使用说明 echo I am dongdaxia yingxiong. |sed 's#^.*am \([a-z].*\) yin.*$#\1#g' echo ...
- [转帖]PKI技术原理(收集 整理 归纳)
PKI技术原理(收集 整理 归纳) https://blog.51cto.com/3layer/20430 总结归纳的 灰常好.. 7layer关注8人评论39427人阅读2007-03-14 11: ...
- 腾讯云服务器的CPU ---发现大厂都很那啥
今天给同事看了下 腾讯云上面的ora从了数据库的启动问题 简单看了下 硬件配置如下: System: Host: VM_0_8_centos Kernel: -.el6.x86_64 x86_64 b ...
- dash shell 的一些总结
最近写个一些dash shell 相关的代码,中间遇到了一些坑以及需要注意的地方,记录一下 1 参数 numberofargmuments(){ echo "The number of ar ...
- Spring 的 Bean 管理(注解方式)
Spring 的 Bean 管理(注解方式) 1. 导入必要的 jar 包和 xml 文件 使用注解需要导入 spring-aop 的 jar 包. applicationContext.xml 文件 ...
- Java lesson16homework
package lesson16; /** * 1. 随机生成4个0到9的整数,组成一个序列(使用LinkedList<Integer>存储) 例如:3 6 4 4 2. 然后要求用 ...
- c#获取桌面路径和bin文件的路径
string path = Environment.GetFolderPath(Environment.SpecialFolder.DesktopDirectory): 生成的运行bin文件下的路径: ...