How to add checkbox element to div dynamically?

Question

I want to make a JavaScript function that, after pressing button takes a list of checkbox elements with their contents, checks all checkboxes , creates a div with these checkboxes and writes the result in an 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 an HTML Div element with a list of checkbox elements. They are also displayed dynamically. Initially, the 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 is that it checks all the checkboxes in my list, but in the resulting HTML form they are not displayed again. What's wrong with her? thank you

Answer 1

Besides replacing prop () with attr (), as Rik Lewis correctly recommended that you put the line one by one

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

at the bottom of the function and add the # symbol in front of the selector identifier as follows:

 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>