javascript - 为数组中的每个对象创建一个输入和标签

Question

我用成分列表填充了一个数组。我需要为数组中的每个对象(只是“名称”对象)动态创建一个复选框和标签组合

这是我尝试为数组中的每个对象创建的代码

<div class="column">
<label for="Doughnuts">Doughnuts</label>
<input type="checkbox" name = "Doughnuts">
</div>

我需要为数组中的每个对象复制该代码片段

另外，我如何将复选框的值放入数组中以供以后使用

https://codepen.io/humzaysf/pen/QozzXE

Answer 1

var AvailableToppings = [
  {Name: "Pepperoni",ExtraPrice: 0.75},
  {Name: "Tomatoes", ExtraPrice: 0.70},
  {Name: "Anchovies", ExtraPrice: 0.60},
  {Name: "Mushroom", ExtraPrice: 0.50},
  {Name: "Garlic", ExtraPrice: 0.80},
  {Name: "Pinapple", ExtraPrice: 1.00},
  {Name: "Turkey Ham", ExtraPrice: 1.00},
  {Name: "Spicy Beef", ExtraPrice: 1.50},
  {Name: "Spicy Chicken", ExtraPrice: 1.50},
  {Name: "Jalapenos", ExtraPrice: 0.50}
];

var ingreChkboxes = document.getElementById('ingre-chkboxes');

AvailableToppings.map((AvailableTopping, index) => {
  var Name = AvailableTopping.Name;
  var parentDiv = document.createElement('div');
  parentDiv.setAttribute('class', 'column');

  var Label = document.createElement('label');
  Label.setAttribute('for', Name);
  var Node = document.createTextNode(Name + " ");
  Label.appendChild(Node);

  var Input = document.createElement('input');
  Input.setAttribute('type', 'checkbox');
  Input.setAttribute('name', Name);

  parentDiv.appendChild(Label).appendChild(Input);

  ingreChkboxes.appendChild(parentDiv);
});

function submitToppings() {
    var chosenOptions = [];
    var options = document.querySelectorAll("#ingre-chkboxes input[type=checkbox]");

    options.forEach((option) => {
       if(option.checked) {
           chosenOptions.push(option.getAttribute('name'));
       }
    });

    alert(chosenOptions);
}

/* CSS Document */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Permanent Marker', cursive;
}

body {
    height: 100vh;

}

h1{
    font-family: 'Alfa Slab One', cursive;
    letter-spacing: 5px
}


	.grid {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
		margin: -1em 0 1em -1em;
  }
  .grid-item {
    flex: 1;
		padding: 1em 0 0 1em;
		margin-top: auto;
		margin-bottom: auto;
  }


/*Ignore above*/



.modal-bb {
	position: relative;
	height: 100%;
}

.modal-bb-contents {
	width: 90%;
	height: 80%;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	border: solid black;
	text-align: center;
	padding: 3vh 3vh;
}

#button-container {
	display: flex;
	justify-content: right; /* align horizontal */
	align-items: center; /* align vertical */
	border: thin #6A2021 groove;
	padding-left: 2%;
}


#Ingrediants-button {
	background: none;
    border:  none;
    color: rgb(196, 19, 19);
    font-size: 8vh;
    font-family: 'Permanent Marker', cursive;
    cursor: pointer;	
}

.expander-toggle {
	font-size: 10vh;
	padding: 0vh  10vw;
	cursor: pointer;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10vh;
  height: auto; 
	
}


/* Clear floats after the columns */
.row:after {

  display: table;
  clear: both;
}

.ingre-chkbox {
	display: block;
}

<div class="modal-bb">  <!-- Container for modal-box -->
	<div class="modal-bb-contents">	<!-- modal-box -->
		<div id = "button-container">
			<p class="expander-toggle">+</p>
			<button id="Ingrediants-button">Choose Bread</button>				
	  	</div>
		<div class="ingre-chkbox" id="ingre-chkboxes">
		</div>
        <button onClick="submitToppings();">Submit toppings</button>
	</div>
</div>