Creating check-boxes out of an array in JavaScript

Question

I have an array, which is hard-coded for now, and I am trying to create checkboxes based on the array elements that I have.

var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"]; 
for(var i = 0; i < options.length; i++) {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "checkbox");
  x.innerHTML = options[i];
  x.name = options[i];
  features.appendChild(x);
}

<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
    <option value="selectcard">Select Target</option>
</select>

<br><br>

<label>All Features:</label>
<div id='features'>
</div>

<br>
<button id="btn-features">Select All</button>

<br><br>

<button id="btn-remove">Remove All</button>

I cannot see names of checkboxes as the elements of the array.

Any help please?

input elements cannot have content, so they don't have innerHTML. Use x.value instead. — connexo
– connexo, Commented May 5, 2021 at 19:18

daddygames · Accepted Answer · 2021-05-06 12:20:45Z

3

Checkboxes do not automatically add a label next to them. So you need to add the <label> tag for each checkbox. In my version of your code here, I have also added the for attribute to each label so that clicking the label will toggle it's matching checkbox.

var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"]; 
for(var i = 0; i < options.length; i++) {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.value = options[i];
    x.id = 'checkbox-' + options[i];
    var y = document.createElement('LABEL');
    y.textContent = options[i];
    y.setAttribute('for', x.id);
    features.appendChild(x);
    features.appendChild(y);
}

<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
    <option value="selectcard">Select Target</option>
</select>

<br><br>

<label>All Features:</label>
<div id='features'>
</div>

<br>
<button id="btn-features">Select All</button>

<br><br>

<button id="btn-remove">Remove All</button>

As suggested by Scott Marcus, you may also choose to wrap your label around the checkbox to avoid the need to use the for attribute and an id. Here is one way to do it:

var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"]; 
for(var i = 0; i < options.length; i++) {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.value = options[i];
    var z = document.createElement('SPAN');
    z.textContent = options[i];
    var y = document.createElement('LABEL');
    y.appendChild(x);
    y.appendChild(z);
    features.appendChild(y);
}

<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
    <option value="selectcard">Select Target</option>
</select>

<br><br>

<label>All Features:</label>
<div id='features'>
</div>

<br>
<button id="btn-features">Select All</button>

<br><br>

<button id="btn-remove">Remove All</button>

edited May 6, 2021 at 12:20

answered May 5, 2021 at 19:19

daddygames

1,9381 gold badge12 silver badges19 bronze badges

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

1 Comment

Scott Marcus Over a year ago

You shouldn't be using .innerHTML in general as there are security and performance implications to its use, but certainly not when you aren't working with HTML strings. Use .textContent instead. Also (just FYI), instead of adding the for attribute to a label (which requires than an id be added to the checkboxes), you can just wrap the checkbox inside of the label.

Carsten Massmann · Accepted Answer · 2021-05-05 20:27:22Z

0

Well, if you have the balls to use .innerHTML (at least once), you could simply do it like this: ;-)

var options = ["Col1", "Col2", "Col3", "Col4", "Col5"]; 
document.getElementById('features').innerHTML=
options.map(o=>'<label><input type="checkbox" name="'+o+'">'+o+'</label>').join(" ");
document.onclick=ev=>{
if (ev.target.tagName==="BUTTON")
document.querySelectorAll("input[type=checkbox]").forEach(c=>c.checked=ev.target.textContent[0]==="S")}

<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
    <option value="selectcard">Select Target</option>
</select>

<br><br>

<label>All Features:</label>
<div id='features'>
</div>

<br>
<button id="btn-features">Select All</button>

<br><br>

<button id="btn-remove">Remove All</button>

edited May 5, 2021 at 20:27

answered May 5, 2021 at 20:16

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

Creating check-boxes out of an array in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related