解决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 30 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 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/28 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python识别验证码的实现示例
2020/09/30 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
安全教育心得体会
2013/12/29 职场文书
开工典礼策划方案
2014/05/23 职场文书
体育比赛口号
2014/06/09 职场文书
中学图书馆工作总结
2015/08/11 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技