如何将表单复选框序列化为单索引数组并适配PHP数组接收？

嘿，这个问题其实很好解决，我给你两种实用的思路，看哪种更适合你的场景：

方法一：修改复选框的name属性（最推荐，零额外JS代码） #

这是最简单直接的方案，利用PHP对表单数组的原生支持，不需要写额外的JavaScript处理逻辑。你只需要把每个复选框的name属性从course-1、course-2改成courses[course-1]、courses[course-2]就行，修改后的表单代码如下：

<form id="my-form"> 
  <input name="name" type="text" value="my-name"> 
  <input name="surname" type="text" value="surname"> 
  <input name="email" type="text" value="email"> 
  <input type="checkbox" name="courses[course-1]" id="" value="1"> 
  <input type="checkbox" name="courses[course-2]" id="" value="2"> 
  <input type="checkbox" name="courses[course-3]" id="" value="3"> 
  <input type="checkbox" name="courses[course-4]" id="" value="4"> 
  <input type="checkbox" name="courses[course-5]" id="" value="5"> 
</form>

之后你还是用原来的序列化代码：

var data = $('#my-form').serializeArray(); 
console.log(data);

此时PHP接收到的$_POST数据会自动变成你想要的结构：

$_POST['courses']['course-1'] = 1;
$_POST['courses']['course-2'] = 2;
// 选中的复选框都会被整理到$_POST['courses']里

方法二：用JavaScript手动处理序列化结果（无法修改表单时用） #

如果因为业务限制没法修改原始表单的name属性，那我们可以在序列化后手动把复选框数据合并成单个数组项：

var data = $('#my-form').serializeArray();
var processedData = [];
var courseGroup = {};

// 遍历序列化后的每一项
data.forEach(item => {
  // 判断当前项是否是course系列的复选框
  if (item.name.includes('course-')) {
    courseGroup[item.name] = item.value;
  } else {
    // 普通表单字段直接加入处理后的数组
    processedData.push(item);
  }
});

// 把整理好的复选框组作为单个项加入数组
processedData.push({ name: 'courses', value: courseGroup });

// 现在processedData就是你要的结构了
console.log(processedData);

如果是用AJAX提交数据，更推荐直接把整理好的courseGroup作为单独参数传递，这样PHP接收起来更方便：

$.ajax({
  url: '你的PHP接口地址',
  method: 'POST',
  data: {
    name: $('input[name="name"]').val(),
    surname: $('input[name="surname"]').val(),
    email: $('input[name="email"]').val(),
    courses: courseGroup // 直接传递整理好的对象
  },
  success: function(res) {
    // 处理接口响应
  }
});

这样PHP里就能直接拿到$_POST['courses']这个关联数组，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user9868797