解决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 11 Javascript
潜说js对象和数组
May 25 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
原生JavaScript实现留言板
Jan 10 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
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python SQLite3简介
2018/02/22 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python代码编写计算器小程序
2020/03/30 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
百度软件工程师职位
2013/02/14 面试题
找工作求职信
2014/07/07 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Python数据处理的三个实用技巧分享
2022/04/01 Python