title: Dynamically Create Checkboxes from AJAX Response
body: <p>I'm creating a website involving bootstrap and want to display a list of checkboxes (names of computers) in a modal dialog for the user to choose from. I have an AJAX call and response that is returning the information I want but I don't know how to properly display it. Basically, each item that is in the returned list I receive, I want to append a checkbox to the list being displayed in the modal. I've done something similar to this before and feel like I'm close but don't quite understand how something like this can be done. If anyone could teach me how to do this I would greatly appreciate it! My javascript/html code is below from my JSP page. Let me know if this is not clear or more information is needed on my part. Thank you very much!!!</p>
  
  <pre><code>    &lt;div class="modal" id="myModal"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Workstations&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;ul id="wkslist"&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;a href="#" data-dismiss="modal" class="btn"&gt;Cancel&lt;/a&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Done&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript code I'm using to the response back from my AJAX call. </p>
  
  <pre><code>    function getWorkstations(e)
  {
      var branchName = $('#txtBranch').val();
  
  
    if(e.checked)
        {
        $.ajax({
            url : 'ajaxwks.html',
            type: 'POST',
            data: branchName,
            cache:false,
            beforeSend: function(xhr) {
  
  
                xhr.setRequestHeader("Content-Type", "text/plain");
  
            },
            success : function(response) 
            {
               alert(response);
  
               $.each(response, function(key, value){
  
  
                   $('#wkslist').append($("&lt;input type='checkbox' name=" + key + "").text(value) + "&lt;br&gt;");
               });
            },
  
            error:function(jqXhr, textStatus, errorThrown){
                alert(textStatus);
            }
        });
  
        //ajax call for workstations.
           $('#myModal').modal('show');
        }
  }
  </code></pre>
  
  <p>This is a snippet of what is returned when I popup the message box when doing an alert in javascript.</p>
  
  <pre><code>["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]
  </code></pre>