Javascript dynamic checkbox values as array

Question

I currently have a json file that contains the inventory of vehicles. I have a search page that allows the users to filter the inventory using checkboxes, such as make, model, color, etc..

I need to pass the checkbox values as an array. For example, if I select Mustang and Camaro checkboxes, it would need to be 'Model' => ['Mustang', 'Camaro'] .

I tried to create 2 arrays. One for the keys, (Make, Model, Color), etc... and another for each of the values, (Mustang and Camaro). Some values may have one item, some may have several. For example, if we wanted all red Mustang's and Camaro's, the array should look like:

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

Or, just red Mustangs:

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

I can loop each of the checkboxes, and I attempted to put all the checkbox names (data.id) as a key, and a second array (data.value) as the values. If the key exists, then add each of the values that have the same key.

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});
            }
        });

My code returns:

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

Which is close, but if(.(data.id in kv)) is always being called, preventing me from adding multiple selections.

I am sorry if I am having coders block on something that I should have been able to do.

Answer 1

Since you are using jQuery in your example I assume is not a problem to use it also to retrieve the actual data-values, therefore I'll use it in my example:)

You can find here a working example where you have a bunch of checkboxes and a button to collect the checkboxes values.

 $("#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>