解决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 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
react-router4 嵌套路由的使用方法
Jul 24 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Javascript中的高阶函数介绍
2015/03/15 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python根据京东商品url获取产品价格
2015/08/09 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
python爬虫请求头的使用
2020/12/01 Python
PyQt实现计数器的方法示例
2021/01/18 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
经典商业广告词
2014/03/13 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
赡养老人协议书范本
2015/08/06 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript