解决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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 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
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vuex存储token示例
2019/11/11 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python设置环境变量的作用和实例
2019/07/09 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
进程的查看和调度分别使用什么命令
2015/03/25 面试题
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
个人批评与自我批评
2014/10/15 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
出纳试用期自我评价
2015/03/10 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
python区块链实现简版工作量证明
2022/05/25 Python