从 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>

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

请问有什么帮助吗？

Answer 1

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

 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>

Answer 2

好吧，如果您有能力使用.innerHTML （至少一次），您可以简单地这样做：;-)

 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>