解决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中各浏览器中鼠标按键值的差异
Apr 07 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
VUE写一个简单的表格实例
Aug 06 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
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
详解Python中for循环的使用方法
2015/05/14 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python中实现词云图的示例
2020/12/19 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
函授本科个人自我鉴定
2014/03/25 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python