本文介绍在 jquery ajax 中处理多个同名复选框（如 `name="product-category"`）时，如何将选中的多个值合并为单个逗号分隔字符串（如 `product-category=29,27`），而非默认的重复键格式（`product-category=29&product-category=27`）。
在表单提交场景中，尤其是与 WooCommerce 或自定义 AJAX 搜索联动时，复选框常用于多条件筛选（如商品分类）。但 jQuery 的 .serialize() 方法对同名复选框仅做“键值对平铺”，生成形如 product-category=29&product-category=27 的查询字符串——这在 PHP 后端接收时会被覆盖（仅保留最后一个值），无法直接解析为数组。
正确做法是：先用 .serializeArray() 获取结构化数据数组，再按需聚合特定字段，最后通过 $.param() 重新序列化。以下是完整、健壮的实现方案：
<script>
(function($) {
$(document).ready(function() {
$(document).on('submit', '#myform', function(e) {
e.preventDefault();
// 1. 获取所有表单项为对象数组 [{name: "x", value: "v"}, ...]
var data = $(this).serializeArray();
// 2. 提取所有 product-category 的值，并用逗号连接
var categoryValues = data
.filter(item => item.name === 'product-category')
.map(item => item.value);
var categories = categoryValues.length ? categoryValues.join(',') : '';
// 3. 过滤掉原始的 product-category 项，注入合并后的新项
data = data
.filter(item => item.name !== 'product-category')
.concat(categories ? { name: 'product-category', value: categories } : []);
// 4. 重新序列化为标准 URL 编码字符串
var serializedData = $.param(data);
console.log(serializedData); // 输出示例：product-category=29%2C27&other-field=value
// 5. 发起 AJAX 请求
$.ajax({
url: "<?php echo WC_AJAX::get_endpoint('kia_search'); ?>",
method: 'POST',
data: serializedData,
dataType: 'html'
}).done(function(response) {
$('.products').html(response);
}).fail(function(xhr) {
console.error('AJAX 请求失败:', xhr.statusText);
});
});
});
})(jQuery);✅ 关键优势：
- 兼容任意数量的同名字段（不限于复选框），扩展性强；
- 避免硬编码字段名，逻辑清晰易维护；
- 空值处理完善（未勾选时自动忽略该字段）；
- 保留其他表单项（如文本框、下拉框）的原始序列化行为。
⚠️ 注意事项：
- PHP 后端需使用 $_POST['product-category'] 接收，并用 explode(',', $_POST['product-category']) 解析为数组；
- 若需支持空格或特殊字符，请确保前端不手动编码（$.param() 已自动处理 URL 编码）；
- 复选框 id 属性应唯一（示例中 id="product-category-checkbox" 在循环中重复，建议移除或动态生成，如 id="cat-<?php echo $cat->term_id; ?>"）。
通过此方法，你既能保持 jQuery 表单序列化的简洁性，又能精准控制多值字段的传输格式，让前后端数据契约更可靠、可预测。
