创建动态复选框 Javascript

Question

我有一个不明白的问题。

我正在创建一个基于数组的复选框"生成器"。

			var array = new Array();
			array[0]="Monday";
			array[1]="Tuesday";
			array[2]="Wendesday";
			array[3]="Thirsday";
			array[4]="Friday";
			array[5]="Saturday";
			array[6]="Sunday";
			var cbh = document.getElementById('checkboxes');
		    var val = '';
		    var cap = '';
		    var cb = document.createElement('input');
		    var j = "";
			for (var i in array) {
				//Name of checkboxes are their number so I convert the i into a string. 
				j = i.toString();
				console.log('J = ', j);
				val = j;
				//cap will be the value/text of array[i]
				cap = array[i];
				console.log('cap =', cap);
			    cb.type = 'checkbox';
			    cbh.appendChild(cb);
			    cb.name = val;
			    cb.value = cap;
			    cbh.appendChild(document.createTextNode(cap));
			}

			* {
    			box-sizing: border-box;
			}
			#data {
			    padding:0;
				width:100vw;
			}
			.multiselect {
				overflow: visible;
				padding:0;
				padding-left:1px;
				border:none;
				background-color:#eee;
				width:100vw;
				white-space: normal;
				height:200px;
			}
			.checkboxes {
				height:100px;
				width:100px;
				border:1px solid #000;
				background-color:white;
				margin-left:-1px;
				display:inline-block;
			}
		</style>

<form>
			<div id="data">
				<div class="multiselect">
					 <div id="checkboxes">
					</div>
				</div>
			</div>
		</form>

(CSS对我的问题并不重要...我认为(

问题是它只为最后一个元素创建了一个复选框，我不明白为什么......我想要每天的复选框。

之后，我问如何检索元素选择，但这是在第二部分中。

所以如果有人有想法，我将不胜感激！

问候。

Answer 1

var cb = document.createElement('input');在

for 循环中使用这一行

var array = new Array();
			array[0]="Monday";
			array[1]="Tuesday";
			array[2]="Wendesday";
			array[3]="Thirsday";
			array[4]="Friday";
			array[5]="Saturday";
			array[6]="Sunday";
			var cbh = document.getElementById('checkboxes');
		    var val = '';
		    var cap = '';
		    
		    var j = "";
			for (var i in array) {
				//Name of checkboxes are their number so I convert the i into a string. 
				j = i.toString();
	
				val = j;
				//cap will be the value/text of array[i]
        var cb = document.createElement('input');
        var label= document.createElement("label");
        
			   	cap = array[i];
          var text = document.createTextNode(cap);
			    cb.type = 'checkbox';
			    cbh.appendChild(cb);
			    cb.name = val;
			    cb.value = cap;
          label.appendChild(cb); 
          label.appendChild(text);
			    cbh.appendChild(label);
			}

* {
    			box-sizing: border-box;
			}
			#data {
			    padding:0;
				width:100vw;
			}
			.multiselect {
				overflow: visible;
				padding:0;
				padding-left:1px;
				border:none;
				background-color:#eee;
				width:100vw;
				white-space: normal;
				height:200px;
			}
			.checkboxes {
				height:100px;
				width:100px;
				border:1px solid #000;
				background-color:white;
				margin-left:-1px;
				display:inline-block;
			}
      
            label {
  display: inline-block;
}
		</style>

<form>
			<div id="data">
				<div class="multiselect">
					 <div id="checkboxes">
					</div>
				</div>
			</div>
		</form>

更新：为了保持标签和复选框在一起用

label {
  display: inline-block;
}

Answer 2

你需要在 for 循环中声明你的新节点：

var array = new Array();
			array[0]="Monday";
			array[1]="Tuesday";
			array[2]="Wendesday";
			array[3]="Thirsday";
			array[4]="Friday";
			array[5]="Saturday";
			array[6]="Sunday";
			var cbh = document.getElementById('checkboxes');
		    
		    var j = "";
			for (var i in array) {
              var val = '';
		      var cap = '';
		      var cb = document.createElement('input');
				//Name of checkboxes are their number so I convert the i into a string. 
				j = i.toString();
				console.log('J = ', j);
				val = j;
				//cap will be the value/text of array[i]
				cap = array[i];
				console.log('cap =', cap);
			    cb.type = 'checkbox';
			    cbh.appendChild(cb);
			    cb.name = val;
			    cb.value = cap;
			    cbh.appendChild(document.createTextNode(cap));
			}

<form>
			<div id="data">
				<div class="multiselect">
					 <div id="checkboxes">
					</div>
				</div>
			</div>
		</form>

Answer 3

put var cb = document.createElement('input'(; 在循环内：

                var j = "";
                for (var i in array) {
                    //Name of checkboxes are their number so I convert the i into a string. 
                    var cb = document.createElement('input');
                    j = i.toString();
                    console.log('J = ', j);
                    val = j;
                    //cap will be the value/text of array[i]
                    cap = array[i];
                    console.log('cap =', cap);

                    cb.type = 'checkbox';
                    cbh.appendChild(cb);
                    cb.name = val;
                    cb.value = cap;
                    cbh.appendChild(document.createTextNode(cap));
                }