javascript - 在 JavaScript 中从数组中创建复选框

Question

我有一个数组，现在是硬编码的，我正在尝试根据我拥有的数组元素创建复选框。

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>

我看不到复选框的名称作为数组的元素。

请问有什么帮助吗？

标签： javascripthtml

Answer 1

复选框不会自动在它们旁边添加标签。所以你需要<label>为每个复选框添加标签。在我的代码版本中，我还for为每个标签添加了属性，以便单击标签将切换它的匹配复选框。

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>

正如 Scott Marcus 所建议的，您也可以选择将您label的复选框包裹起来以避免使用该for属性，id.这是一种方法：

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>