解决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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php中session定期自动清理的方法
2015/11/12 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
js异或加解密效果代码
2008/06/25 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python能在浏览器能运行吗
2020/06/17 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
文秘专业自荐信
2013/10/14 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
网络工程师职业规划
2014/02/10 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang