解决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判断单个复选框是否被选中的代码
Sep 03 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
详解小程序横屏方案对比
Jun 28 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php一些公用函数的集合
2008/03/27 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
完美解决AJAX跨域问题
2013/11/01 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python正则分析nginx的访问日志
2017/01/17 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
工厂实习感言
2014/01/14 职场文书
销售主管竞聘书
2014/03/31 职场文书
欢迎横幅标语
2014/06/17 职场文书
高中同学会活动方案
2014/08/14 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers