CODEWITHSUNDEEP
javascripthtml
Pardeep Kumar
Pardeep Kumar

Reputation: 153

Creating check-boxes out of an array in JavaScript

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?

Upvotes: 0

Views: 353

Answers (2)

daddygames
daddygames

Reputation: 1928

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>

Upvotes: 3

Carsten Massmann
Carsten Massmann

Reputation: 28196

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>

Upvotes: 0

Related Questions