解决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的一些总结
Nov 03 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
Element InputNumber计数器的使用方法
Jul 27 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
phpmail类发送邮件函数代码
2012/02/20 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python冒泡排序注意要点实例详解
2016/09/09 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python交互界面的退出方法
2019/02/16 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python如何实现强制数据类型转换
2019/11/22 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
性能测试工程师的面试题
2015/02/20 面试题
新学期校长寄语
2014/01/18 职场文书
部队万能检讨书
2014/02/20 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS