How to add a checked checkbox element into Div dynamically?

Question

I want to make a JavaScript function , which, after pressing a button , takes the list of checkbox elements with their content, checks all the checkboxes , creates a div element with these checkboxes and writes the result to the HTML form.

Here is my code:

function  confirmDrivers() {     
   $('#selectedList').find('.chk').prop("checked", true);
   var list = document.getElementById('selectedList').getElementsByTagName("li");
   var myForm = document.getElementById('formInput');
   var text = "<strong>Selected Drivers: </strong> <br><br>";
   var myDiv = document.createElement("div");
   myDiv.setAttribute("id","selectedInputDrivers");
   myDiv.style.overflowY = "auto";
   myDiv.style.maxHeight = "100px";
   myDiv.style.maxWidth = "250px";

   for (i = list.length - 1; i >= 0; i--) {                        
      myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;                 
   }            
   $("formInput").find('.chk').prop("checked", true);
   myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
   myForm.innerHTML = text + myForm.innerHTML;
}

Here is the HTML Div element with the list of checkbox elements. They also appear dynamically. Initially, Div is empty.

<div id = "selectedList" class = "col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All"  name="removeAllDr" onclick="removeAllDrivers()"  />
<input type="button" id="confirmD" value="Confirm"  name="confirm" onclick="confirmDrivers()"  />
<br><br>


</div>

And this is the HTML form, where I want my result to appear:

 <form id="formInput">    

</form>  

The problem here is that it checks all the checkboxes in my list, but in the resulting HTML form they appear unchecked again. What is wrong with it? Thank you

Answer 1

Besides replacing prop() to attr() as Rik Lewis correctly recommended you can alternately put the line

$("formInput").find('.chk').prop("checked", true);

at the bottom of the function and add the # character in front the selector id like this:

function  confirmDrivers() {     
   $('#selectedList').find('.chk').prop("checked", true);
   var list = document.getElementById('selectedList').getElementsByTagName("li");
   var myForm = document.getElementById('formInput');
   var text = "<strong>Selected Drivers: </strong> <br><br>";
   var myDiv = document.createElement("div");
   myDiv.setAttribute("id","selectedInputDrivers");
   myDiv.style.overflowY = "auto";
   myDiv.style.maxHeight = "100px";
   myDiv.style.maxWidth = "250px";

   for (i = list.length - 1; i >= 0; i--) {                        
      myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;                 
   }            
   myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
   myForm.innerHTML = text + myForm.innerHTML;
   $("#formInput").find('.chk').prop("checked", true);
}

---

  function confirmDrivers() { $('#selectedList').find('.chk').prop("checked", true); var list = document.getElementById('selectedList').getElementsByTagName("li"); var myForm = document.getElementById('formInput'); var text = "<strong>Selected Drivers: </strong> <br><br>"; var myDiv = document.createElement("div"); myDiv.setAttribute("id", "selectedInputDrivers"); myDiv.style.overflowY = "auto"; myDiv.style.maxHeight = "100px"; myDiv.style.maxWidth = "250px"; for (i = list.length - 1; i >= 0; i--) { myDiv.innerHTML = list[i].innerHTML + '<br>' + myDiv.innerHTML; } myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML; myForm.innerHTML = text + myForm.innerHTML; $("#formInput").find('.chk').prop("checked", true); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selectedList" class="col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto"> <strong style="margin-right:10px">Selected List of Drivers</strong> <input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" /> <input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" /> <br> <br> <ul> <li> <input type="checkbox" class="chk" value="test" /> </li> <li> <input type="checkbox" class="chk" value="test" /> </li> <ul> </div> <form id="formInput"> </form> 

Answer 2

<div id="cblist">
    <input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
</div>

<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />

<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
   container.append($(html));
}
</script>