Combining several groups of checkboxes into a single array using JavaScript

Question

Combining several groups of checkboxes into a single array using JavaScript

I am working on a form that contains checkbox groups, structured like this:

<input type="checkbox" name="group_one" value="1">
<input type="checkbox" name="group_one" value="2">
<input type="checkbox" name="group_two" value="1">
<input type="checkbox" name="group_two" value="2">

My goal is to create an array with keys representing the checkboxes' names and values as arrays of their selected values when the form changes. Here is the JavaScript code I have so far:

var checkboxes = $('input').filter(':checked');
var myArray = [];

checkboxes.each(function () {

 var name = $(this).attr('name');
 var val  = $(this).val();

 myArray[name] = val;

});

The desired outcome is to have an array where 'name' serves as keys and 'val' as arrays, similar to this format:

[group_one: {1,2}, group_two: {1,2}]

I hope this explanation makes sense. Thank you in advance for any assistance!

javascript arrays

Answer 1

Answer №1

In order to achieve your desired output, you should switch the array and plain-object notations. The outer structure should be a plain object with named keys, while the inner structure should consist of arrays of values:

{group_one: [1,2], group_two: [1,2]}

To accomplish this, start by initializing the outer structure as a plain object, perhaps naming it in the plural form:

var myArrays = {};

Next, within your loop, verify if a value already exists for the given key. If not, create an array using [] and add the value to it. Otherwise, append the value to the existing array:

$("form").change(function () {
  var checkboxes = $('input').filter(':checked');
  var myArrays = {};

  checkboxes.each(function () {
    var name = $(this).attr('name');
    var val  = $(this).val();
    if (!(name in myArrays)) myArrays[name] = [];
    myArrays[name].push(val);
  });
  $("pre").text(JSON.stringify(myArrays, null, 2)); // For debugging
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="group_one" checked value="1">Option 1
  <input type="checkbox" name="group_one"         value="2">Option 2
  <input type="checkbox" name="group_one" checked value="3">Option 3
  <br>
  <input type="checkbox" name="group_two"         value="1">Option 1
  <input type="checkbox" name="group_two" checked value="2">Option 2
  <input type="checkbox" name="group_two" checked value="3">Option 3
</form>
<pre></pre>

Answer 2

In order to achieve your desired output, you should switch the array and plain-object notations. The outer structure should be a plain object with named keys, while the inner structure should consist of arrays of values:

{group_one: [1,2], group_two: [1,2]}

To accomplish this, start by initializing the outer structure as a plain object, perhaps naming it in the plural form:

var myArrays = {};

Next, within your loop, verify if a value already exists for the given key. If not, create an array using [] and add the value to it. Otherwise, append the value to the existing array:

$("form").change(function () {
  var checkboxes = $('input').filter(':checked');
  var myArrays = {};

  checkboxes.each(function () {
    var name = $(this).attr('name');
    var val  = $(this).val();
    if (!(name in myArrays)) myArrays[name] = [];
    myArrays[name].push(val);
  });
  $("pre").text(JSON.stringify(myArrays, null, 2)); // For debugging
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="group_one" checked value="1">Option 1
  <input type="checkbox" name="group_one"         value="2">Option 2
  <input type="checkbox" name="group_one" checked value="3">Option 3
  <br>
  <input type="checkbox" name="group_two"         value="1">Option 1
  <input type="checkbox" name="group_two" checked value="2">Option 2
  <input type="checkbox" name="group_two" checked value="3">Option 3
</form>
<pre></pre>

Combining several groups of checkboxes into a single array using JavaScript

Answer №1

Similar questions

Experiencing difficulties with displaying the values of an array in Java

Utilizing the power of HTML datalist and *ngFor to present one value while sending another

Encountered an error while trying to create module kendo.directives using JSPM

What is the process for filling a table with data sourced from Firebase?

How can I prevent tinymce from stripping out my <link> tag?

Experiencing issues with applying bootstrap style to pagination when using react-js-pagination

AngularJS faces issue with view not reflecting changes made to model

What could be causing the data toggle feature in my navbar to not work on Bootstrap?

Is there a way to hide the row select option for individual rows in MUIDatatables without affecting the multiple row select options?

Error message HMR Webpack was found to be invalid

Adjust the Height of a Pair of Floating DIVs on the Fly

Enhance nested IFELSE statements in TypeScript

Ensure consistency in CSS3 background color transitions

Arranging a collection of strings using the qsort function

Obtain and showcase the index of the checkbox that has been selected

Can you explain the purpose of the "letter:" included in the code and how it is utilized?

A guide on assigning a state variable to a dynamically generated component within a React application

Obtaining the text from an element in Selenium using JavaScript

I am having trouble getting Highcarts to load the JSON data

Determine in jQuery whether a Value is present within a JSON dataset