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提交多个值问题的完整方案,希望能为遇到类似问题的开发者提供参考。