解决Layui Checkbox提交多个值的问题

作者:橙子

时间:2026-10-23

浏览:482

Layui框架默认不支持直接提交Checkbox数组。本文介绍通过JavaScript将选中的Checkbox值收集为数组,转换为JSON字符串后覆盖data.field,后端PHP使用json_decode解析为数组,从而实现对多选数据的完整处理。

文章目录

Layui Checkbox多选提交问题背景

Layui的Checkbox组件在默认情况下存在一个常见痛点,即无法直接提交数组格式的数据。

通常情况下,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转换

在前端JS处理中,逻辑稍显复杂:首先需要遍历获取所有被选中的Checkbox值并存入数组,接着将该数组转换为JSON字符串,最后用这个JSON字符串覆盖Layui表单提交时的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解析与数据库操作

在PHP后端接收时,只需调用json_decode函数,将接收到的JSON字符串解析回数组即可直接使用。


//提交的checkbox  提交过来的是json字符串
$data['quotation_type'] = json_decode($request->post('quotation_type'),true);

完成上述数据转换后,即可按照常规流程执行所需的数据库操作。

以上即为解决Layui Checkbox提交多个值问题的完整方案,希望能为遇到类似问题的开发者提供参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章