解决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 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JS字符串处理实例代码
Aug 05 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
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
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python多线程下载文件的方法
2015/07/10 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
大专生简历的自我评价
2013/11/26 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
高一地理教学反思
2014/01/18 职场文书
产品销售计划书
2014/05/04 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
检讨书怎么写
2015/05/07 职场文书
2019年工作总结范文
2019/05/21 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP