将复选框值映射到空数组

Question

我有一系列与复选框相关联的数组。

这是 HTML：

<input type="checkbox" value="value1">Value 1
<input type="checkbox" value="value2">Value 2
<input type="checkbox" value="value3">Value 3

在我的 jQuery 中，我将这些数组定义如下：

var value1 = ['item1', 'item2', 'item3'];
var value2 = ['itemA', 'itemB', 'itemC'];
var value3 = ['item!', 'item@', 'item#'];

我想根据选中的复选框创建一个新数组，并基本上创建一个数组数组。我已经为此尝试了以下代码，但它不起作用：

var newArray = [];
$('input[type=checkbox]:checked').map(function(){
    newArray.push($(this).val());
});

我可以硬编码 newArray 如下：

var newArray = [value1, value2, value3];

newArray 被填充后，我想循环遍历 newArray 中包含的数组的值以选择随机索引并将它们推送到 randArray。如果我按如下方式对 newArray 进行硬编码，则此部分有效：

var newArray = [itemC, item!, item1]

但如果我尝试将复选框值映射到 newArray，它将不起作用。填充 newArray 后，我想确保 newArray 中每个子集的至少一项包含在 randArray 中。我目前遇到的困难部分是根据检查的内容使用子集填充 newArray。

我正在尝试完成的一个示例类似于在 http://passwordsgenerator.net/ 找到的示例

Answer 1

此语法不将复选框值设置为名称为 value1 的 js 变量的值：

<input type="checkbox" value="value1">Value 1

你可能需要这样的东西：

<input type="checkbox" value="item1,item2,item3">Value 1
<input type="checkbox" value="itemA,itemB,itemC">Value 2
<input type="checkbox" value="item!,item@,item#">Value 3

那么你的 newArray 创建如下所示：

var newArray = [];
$('input[type=checkbox]').map(function () {
    var $cb = $(this);
    if ($cb.is(":checked")) {
        newArray.push($cb.val().split(','));
    } else {
        newArray.push([]);
    }
});

看这个小提琴：

http://jsfiddle.net/slippery_pete/ddpnhww5/1/