如何通过jQuery map()回调返回嵌套数组处理多值复选框？

我明白你现在的需求：要把选中的复选框的多值，用jQuery的map()整理成嵌套数组的形式，比如[['administrator,manager'], ['administrator,contact']]这种结构。之前尝试的方法没生效，大概率是没踩对jQuery map()的两个关键特性，我给你拆解下解决方案：

先明确核心问题：jQuery map()的扁平化特性 #

jQuery的.map()有个容易忽略的点：如果回调函数返回的是一个数组，它会自动把数组里的元素扁平化到结果集中。比如你直接返回[this.value]，最终得到的会是["val1", "val2"]这种一维数组，而不是嵌套结构。要避免扁平化，就得给子数组再套一层数组。

具体解决方案 #

场景1：每个复选框的完整value作为子数组的唯一元素 #

如果你的复选框value本身就是用逗号分隔的字符串（比如value="administrator,manager"），想要直接把每个选中的value放进子数组里，代码应该这么写：

// 选中所有目标复选框，用map处理后转成原生数组
var nestedArray = $('.your-checkbox-class:checked').map(function() {
  // 用双层数组包裹，避免被jQuery map扁平化
  return [ [this.value] ];
}).get(); // 关键！必须用get()把jQuery对象转成原生数组

比如你选中两个复选框，最终得到的就是：
[["administrator,manager"], ["administrator,contact"]]

场景2：把每个复选框的value按逗号拆分成子数组元素 #

如果你想要把每个复选框的value拆分成单个值放进子数组（比如变成[["administrator","manager"], ["administrator","contact"]]），只需在回调里拆分value，再套一层数组即可：

var nestedArray = $('.your-checkbox-class:checked').map(function() {
  // 先拆分value，再用数组包裹防止扁平化
  return [ this.value.split(',') ];
}).get();

你之前无效的原因排查 #

你试过用[this.value]和[[this.value]]但只得到单值数组，大概率是没调用.get()方法——jQuery map()返回的是jQuery包装对象，不是原生数组，必须用.get()转换后才能看到正确的嵌套结构。

完整示例代码 #

给你一个可直接测试的完整例子：

<!-- HTML结构 -->
<div>
  <label><input type="checkbox" class="role-checkbox" value="administrator,manager"> 管理员+经理</label>
  <label><input type="checkbox" class="role-checkbox" value="administrator,contact"> 管理员+联系人</label>
  <button id="get-nested-array">获取嵌套数组</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// JavaScript逻辑
$('#get-nested-array').click(function() {
  // 获取完整value的嵌套数组
  var fullValueArray = $('.role-checkbox:checked').map(function() {
    return [ [this.value] ];
  }).get();
  console.log("完整value嵌套数组：", fullValueArray);

  // 获取拆分后的嵌套数组
  var splitValueArray = $('.role-checkbox:checked').map(function() {
    return [ this.value.split(',') ];
  }).get();
  console.log("拆分后嵌套数组：", splitValueArray);
});
</script>

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