Question

我遇到了一个我不明白的问题。

我正在创建一个＆＃34;生成器＆＃34;基于数组的复选框。

＆＃13;

			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));
			}

＆＃13;

			* {
    			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>

＆＃13;

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

＆＃13;

＆＃13; （CSS对我的问题并不重要......我认为）

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

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

所以如果有人有想法，我会感激不尽！

问候。

Answer 1

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

＆＃13;

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));
			}

＆＃13;

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

＆＃13;

Answer 2

把var cb = document.createElement（＆＃39;输入＆＃39;）;循环内部：

                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));
                }

Answer 3

var cb = document.createElement('input');在内部使用此行进行循环

＆＃13;

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);
			}

＆＃13;

* {
    			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>

＆＃13;

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

＆＃13;

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

label {
  display: inline-block;
}

Creation Dynamic复选框Javascript

3 个答案: