How can I create an array from names and values of checkboxes in Javascript?

Question

Imagine I have an array of selected checkboxes. Each has a value and name that corresponds with a filter.

<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">

How can I sort these into one array, like below?

const filters = [
 'colors': [ 'blue', 'orange'],
 'items': ['chair', 'bed'],
 'material': ['plastic', 'wood'],
]

You may want to put your code into jsfiddle.net and provide the link to the code in here so that the audience can look at the problem and possibly help you solve it easier. — Dale
– Dale, Commented Nov 2, 2021 at 17:12
The target structure is not valid. The OP might use an object where each entry features the key (e.g. 'colors', 'items', 'material') and the related array of values. — Peter Seliger
– Peter Seliger, Commented Nov 2, 2021 at 17:22
@PaulMyers ... At SO it is considered to be a nice gesture from the one who got help, to provide some feedback and/or vote on answers and/or accept the answer which was the most helpful in solving the OP's problem. — Peter Seliger
– Peter Seliger, Commented Nov 10, 2021 at 12:06
@PeterSeliger Well I've already thanked the person, whose help I have used. I need 15 rep points to cast a vote on any answers, so I can't do that yet, otherwise I would have. Anything else? — Paul Myers
– Paul Myers, Commented Nov 11, 2021 at 13:25
@PaulMyers ... Then it was nice if you accept ("... and/or accept the answer") Nina's answer. Every answer has an accept link/button next to it; no privileges needed. — Peter Seliger
– Peter Seliger, Commented Nov 11, 2021 at 13:30

Nina Scholz · Accepted Answer · 2021-11-02 17:25:35Z

2

You could get the elements and build an object of arrays.

const result = {};

for (const { name, value } of document.getElementsByClassName('filter-item--checkbox')) {
    (result[name] ??= []).push(value);
}

console.log(result);

<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">

answered Nov 2, 2021 at 17:25

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Seliger · Accepted Answer · 2021-11-02 17:58:33Z

For the OP's use case, where it was said that a solution should target just checked checkbox controls one could/should utilize the FormData Web-API and its entries method together with a reduce task. Passing a form reference directly into the FormData constructor ensures only active control data to be part of the form data object. Thus the name/key and value of an unchecked checkbox control gets not reflected by the form data object.

const formData = new FormData(document.forms[0]);
console.log(
  Array
    .from(
      formData.entries()
    )
    .reduce((result, [key, value]) => {

      const groupedValueList = (result[key] ??= []);
      groupedValueList.push(value);

      return result;

    }, {})
);

.as-console-wrapper { min-height: 85%!important; }

<form>
  <input type="checkbox" name="colors" value="blue" checked/>
  <input type="checkbox" name="colors" value="orange" checked/>
  <input type="checkbox" name="items" value="chair" checked/>
  <input type="checkbox" name="items" value="bed" checked/>
  <input type="checkbox" name="material" value="plastic" checked/>
  <input type="checkbox" name="material" value="wood" checked/>
</form>

In case of collecting all grouped checkbox values regardless of their checked state one just needs to change the above approach slightly too ...

console.log(
  Array
    .from(
      document.querySelectorAll('form [type="checkbox"]')
    )
    .reduce((result, { name:key, value }) => {

      const groupedValueList = (result[key] ??= []);
      groupedValueList.push(value);

      return result;

    }, {})
);

.as-console-wrapper { min-height: 85%!important; }

<form>
  <input type="checkbox" name="colors" value="blue" checked/>
  <input type="checkbox" name="colors" value="orange"/>
  <input type="checkbox" name="items" value="chair" checked/>
  <input type="checkbox" name="items" value="bed"/>
  <input type="checkbox" name="material" value="plastic" checked/>
  <input type="checkbox" name="material" value="wood"/>
</form>

Collectives™ on Stack Overflow

How can I create an array from names and values of checkboxes in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related