本文讲解如何通过监听复选框的点击事件，实时构建一个扁平化（一维）的最终数组：勾选时添加对应预设数组的所有元素，取消勾选时自动移除，避免手动增删带来的索引与重复问题。
本文讲解如何通过监听复选框的点击事件，实时构建一个扁平化（一维）的最终数组：勾选时添加对应预设数组的所有元素，取消勾选时自动移除，避免手动增删带来的索引与重复问题。
在实际开发中，直接对数组进行 push() 和 splice() 操作来管理“勾选即加入、取消即删除”的逻辑，容易因数组嵌套、值重复或索引错位导致难以维护。更健壮且简洁的做法是：每次状态变更后，清空目标数组，并基于当前所有已勾选的复选框，重新聚合对应的静态数据。
该方案天然规避了查找与删除的复杂性，逻辑清晰、可预测性强，尤其适合多个复选框关联不同静态数组的场景。
以下为完整实现代码（含关键注释）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
// 定义各选项对应的静态数组（一维）
const modelArray = ["Height", "size", "bust"];
const hostessArray = ["Height", "bust"];
// 最终输出的一维数组（不嵌套）
let finalArray = [];
$("input:checkbox.country").on("change", function() {
// 每次状态变化时，重置 finalArray
finalArray = [];
// 遍历所有已勾选的复选框
$("input:checkbox.country:checked").each(function() {
const value = $(this).val().toLowerCase(); // 统一处理大小写
switch (value) {
case "model":
finalArray.push(...modelArray); // 展开并追加元素（ES6 扩展运算符）
break;
case "hostess":
finalArray.push(...hostessArray);
break;
default:
console.warn(`Unknown checkbox value: ${value}`);
}
});
console.log("Final array is:", finalArray);
// ✅ 此时 finalArray 始终准确反映当前所有勾选项的数据总和
});✅ 关键要点说明：
- 使用 change 事件替代 click，更符合表单语义（兼容键盘操作与程序触发）；
- 利用扩展运算符 ... 将静态数组“展开”插入，确保 finalArray 是扁平结构（如 ["Height","size","bust","Height","bust"]），而非嵌套数组；
- 通过 $("input:checkbox.country:checked") 动态获取当前有效选项，无需手动跟踪增删，彻底消除状态同步风险；
- 若需去重，可在最后添加 finalArray = [...new Set(finalArray)];；若需保留顺序与重复，当前逻辑已满足。
? 进阶建议：
为提升可维护性，可将映射关系改为对象字面量，避免冗长 switch：
const dataArrayMap = {
model: ["Height", "size", "bust"],
hostess: ["Height", "bust"]
};
$("input:checkbox.country").on("change", function() {
finalArray = [];
$("input:checkbox.country:checked").each(function() {
const arr = dataArrayMap[$(this).val().toLowerCase()];
if (arr) finalArray.push(...arr);
});
console.log("Final array is:", finalArray);
});此方式更易扩展新选项，也便于后续对接配置化数据源。
