解决layui checkbox 提交多个值的问题


Posted in Javascript onSeptember 02, 2019

吐槽一下,layui的checkbox简直就是一个坑...(不能提交数组)

数据是从后台来的

<div class="layui-form-item" >
   <label class="layui-form-label">品种</label>
   <div class="layui-input-inline">
     {foreach $quotation_type as $key=>$val}
        <input name="quotation_type" lay-skin="primary" value="{$key}" title="{$val}" type="checkbox">
     {/foreach}
   </div>
</div>

看看JS部分,有点绕,先把数据写进数组,然后,数组转成json格式,覆盖掉原先的data.field里面的数据

//获取checkbox数据
quotation = new Array();
$("input:checkbox[name='quotation_type']:checked").each(function(){
   quotation.push($(this).val());
});
var json = {};
for (var i = 0; i < quotation.length; i++) {
   json[i] = quotation[i];
}
let myJson = JSON.stringify(json);
data.field.quotation_type = myJson ;

PHP部分,只需要把提交过来的json字符串转成数组就可以使用了

//提交的checkbox  提交过来的是json字符串
$data['quotation_type'] = json_decode($request->post('quotation_type'),true);

最后,进行你需要的数据库操作就可以了。

以上这篇解决layui checkbox 提交多个值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
js实现时分秒倒计时
Dec 03 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 #Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 #Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 #Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 #Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 #Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 #Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php自动加载方式集合
2016/04/04 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python把转列表为集合的方法
2019/06/28 Python
python交易记录整合交易类详解
2019/07/03 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
前台文员个人求职信范文
2014/01/05 职场文书
2014新年寄语
2014/01/20 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
人民检察院起诉书
2015/05/20 职场文书
公司处罚决定书
2015/06/24 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL