解决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 Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
chrome调试javascript详解
Oct 21 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
原生JS实现九宫格抽奖
Sep 13 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 VS ASP
2006/10/09 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python面向对象之类和对象实例详解
2018/12/10 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
如何用Python 加密文件
2020/09/10 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
小学六年级学生评语
2014/04/22 职场文书
英文求职信范文
2014/05/23 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
区域经理岗位职责
2015/02/02 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
小学中队委竞选稿
2015/11/20 职场文书