Dynamically add Checkbox

Question

I have a project where by clicking a button I intend to pick up the text of 3 TextBox and add them to a CheckBox.

So far so good, the problem arises when I want to add these CheckBox automatic, for the user to add more lines.

I have here an example of what he will introduce in a TextBox:

CheckBoxLinhas.Text = "Quantidade: " + TextBoxQuantidade.Text + " Artigo: " + TextBoxArtigo.Text + " Valor: " + TextBoxValor.Text;

How then can I create the CheckBoxes automatic?

Answer 1

You could use an observable array of Knockout.js to do this.

var ViewModel = function(){
  self = this;
  //inicializa a lista de checkboxs vazia
  self.listaCheckBox = ko.observableArray([]);
  
  
  self.adicionaCheckBox = function(){
   self.listaCheckBox.push("checkbox"); 
   }
   
}

$(document).ready(function () {
        var viewModel = new ViewModel();

        ko.applyBindings(viewModel);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<button type="button" data-bind="click:$root.adicionaCheckBox">Adicionar CheckBox</button>
	<ul   data-bind="foreach: $root.listaCheckBox()">
	  <li>
	  <input type="checkbox"/><p class="form-control-static" data-bind="text: $data"></p>
	  </li>
	</ul>