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