Generate check boxes based on array elements then populate another array based on checked check boxes

Question

Let's say we have an empty array that we want to populate it based on checked checkboxes :

let selected = [];

And another array of some person names:

let names = ['Joe', 'Mike', 'Sara', 'Jack'];

I want to generate checkboxes for each of the name's elements first, then I want to add each checked element to the selected array.

I can do this with drop-downs (code below) but I have no idea how this could be done with checkboxes:

let dropDown = document.getElementById('names');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];

// Loop through each of the voices.
names.forEach(function(e, i) {
  // Create a new option element.
  var option = document.createElement('option');

  // Set the options value and text.
  option.value = names[i];
  option.innerHTML = names[i];

  // Add the option to the voice selector.
  dropDown.appendChild(option);
});

// 3 seconds to select the item
setTimeout(function() {

  if (dropDown.value) {
    selected.push(dropDown.value)
  }

  console.log(selected)

}, 3000)

<div class="option">

  <label for="voice">US Pronunciation:</label>
  <select name="voice" id="names"></select>

</div>

Matt Oestreich · Accepted Answer · 2019-12-31 19:12:58Z

2

You'll have to add an onClick event handler for the checkboxes and add them to the select that way.. Something like this should get you started:

let dropDown = document.getElementById('names');
let container = document.getElementById('container');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];

// Loop through each of the voices.
names.forEach(function(e, i) {
  let html = `
    <input onClick="handleCheck('container', 'names')" type="checkbox" name="checkbox" id="${i}_${e}" value="${e}">
    <label for="${i}_${e}">${e}</label>
  `;
  container.innerHTML += html;
});

function handleCheck(containerElementId, inputElementId) {
  let containerElement = document.getElementById(containerElementId);
  let select = document.getElementById(inputElementId);
  select.innerHTML = "";
  selected = [];
  containerElement.querySelectorAll('input[type="checkbox"]').forEach(el => {
    if(el.checked) {
      select.innerHTML += `<option value="${el.value}">${el.value}</option>`;
      selected.push(el.value);
    }
  })
  console.log("selected", selected);
}

<div class="option" id="container">

  <label for="voice">US Pronunciation:</label>
  <select name="voice" id="names"></select>

</div>

edited Dec 31, 2019 at 19:12

answered Dec 31, 2019 at 18:44

Matt Oestreich

8,6163 gold badges19 silver badges46 bronze badges

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

3 Comments

Sara Ree Over a year ago

Thanks for the answer...plus one... your code is complicated for a beginner like me :) and I don't want that drop-down anymore...

Sara Ree Over a year ago

Can you please remove the drop-down and add the names to selected array... I can't understand your code...:(

Matt Oestreich Over a year ago

Done. Is that what you're looking for?

Ivan · Accepted Answer · 2019-12-31 19:19:19Z

You can create a div element containing an input and a label for each element of the array. Each one of these elements needs to be appended to an existing parent element option. You can achieve this by writing down the actual HTML inside back-quotes. Then create an empty element with document.createElement. Using the innerHTML property you can fill this element with the HTML you wrote. Finally append it like you did using appendChild:

  const html = `
    <div>
      <input type="checkbox" id="${name}" name="${name}">
      <label for="${name}">${name}</label>
    </div>
  `.trim();

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;

  const element = option.appendChild(wrapper.firstChild);

Instead of using forEach to loop through your array, I would use map which allows us to create an array of input elements on the go. It's the exact same as using a forEach... the only difference is you need to return an element in your callback function:

const checkboxes = names.map(function(name) {

  const html = `
    <div>
      <input type="checkbox" id="${name}" name="${name}">
      <label for="${name}">${name}</label>
    </div>
  `.trim();

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;

  const element = option.appendChild(wrapper.firstChild);

  return element.querySelector('input');

});

So now we have an array called checkboxes which holds four input elements corresponding to our four names contained in the initial names array.

Whenever you need to know the checkboxes that are checked you can filter them out and get the names of the remaining ones. We'll do this using filter and another map:

checkboxes.filter(checkbox => checkbox.checked)
          .map(checkbox => checkbox.name);

Here's the full code:

const option = document.querySelector('.option');
const names = ['Joe', 'Mike', 'Sara', 'Jack'];

const checkboxes = names.map(function(name) {

  const html = `
    <div>
      <input type="checkbox" id="${name}" name="${name}">
      <label for="${name}">${name}</label>
    </div>
  `.trim();

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;

  const element = option.appendChild(wrapper.firstChild);

  return element.querySelector('input');

});

setTimeout(function() {

  const selected = checkboxes.filter(checkbox => checkbox.checked);

  console.log(selected.map(checkbox => checkbox.name));

}, 3000)

<div class="option">
</div>

Hi @SaraRee, if you need additional information, don't hesitate.

Collectives™ on Stack Overflow

Generate check boxes based on array elements then populate another array based on checked check boxes

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related