Javascript动态复选框值作为数组

Question

我目前有一个包含车辆库存的 json 文件。我有一个搜索页面，允许用户使用复选框过滤库存，例如品牌、型号、颜色等。

我需要将复选框值作为数组传递。例如，如果我选择 Mustang 和 Camaro 复选框，则需要为 'Model' => ['Mustang', 'Camaro']。

我尝试创建 2 个数组。一个用于键（品牌、型号、颜色）等……另一个用于每个值（Mustang 和 Camaro）。有些值可能只有一项，有些可能有几项。例如，如果我们想要所有红色 Mustang 和 Camaro，则数组应如下所示：

['Model' => ['Mustang', 'Camaro'],Color' => ['Red']];

或者，只是红色野马：

['Model' => ['Mustang'],Color' => ['Red']];

我可以循环每个复选框，并尝试将所有复选框名称 (data.id) 作为键，将第二个数组 (data.value) 作为值。如果键存在，则添加具有相同键的每个值。

var kv=[]; // Keys
var vv=[]; // Array of the values for each key.

$("[name='checkBoxItem']").each(function (index, data) {
   if (data.checked) {
          if(!(data.id in kv)){  // Is always called.
               alert("Does't exist, adding : " + data.value);
               kv.push(data.id);
               vv.push(data.value);
                  } else {
                    vv.push(data.value);
                  }
              checked.push({[kv]: vv});
            }
        });

我的代码返回：

Array ( [selected_values] => Array([0] => Array ([Make] => Array([0] => Mustang))))

很接近，但总是调用if(!(data.id in kv))，阻止我添加多项选择。

如果我让程序员阻止了我应该能够做的事情，我很抱歉。

Answer 1

由于您在示例中使用 jQuery，我认为使用它来检索实际数据值也不是问题，因此我将在示例中使用它:)

您可以在此处找到一个工作示例，其中有一堆复选框和一个用于收集复选框值的按钮。

$("#getvalues").on("click", function() {
  var result = {};
  $("input").each(function(index, el) {
    if (el.checked) {
      var id = $(el).data("id");
      var val = $(el).data("value");
      if (!result[id]) result[id] = [];
      result[id].push(val);
    }
  });
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-id="model" data-value="Camaro" >Camaro</input></br>
    <input type="checkbox" data-id="model" data-value="Mustang" >Mustang</input></br>
    Color</br>
    <input type="checkbox" data-id="color" data-value="Red" >Red</input></br>
    <input type="checkbox" data-id="color" data-value="Blue" >Blue</input></br>
    <input type="checkbox" data-id="color" data-value="Green" >Green</input></br>
    <button id="getvalues">
      GET SELECTED VALUES
    </button>