解决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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
javascript 日期常用的方法
Nov 11 Javascript
jQuery Selector选择器小结
May 06 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
video.js使用改变ui过程
Mar 05 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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设计模式之责任链模式的深入解析
2013/06/13 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php rsa加密解密使用详解
2015/01/14 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python使用opencv读取图片的实例
2017/08/17 Python
python实现Adapter模式实例代码
2018/02/09 Python
python学生信息管理系统
2018/03/13 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Django 外键的使用方法详解
2019/07/19 Python
简单了解Django ContentType内置组件
2019/07/23 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
物流管理毕业生自荐信范文
2014/03/15 职场文书
工程承包协议书
2014/04/22 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
Django drf请求模块源码解析
2021/06/08 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android