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

Could you show us a working example of your code. It's difficult to see what could be wrong here from this JS alone — Rory McCrossan
– Rory McCrossan, Commented Feb 1, 2017 at 11:58
Can you create a codepen.io and add the link to your question — Adam
– Adam, Commented Feb 1, 2017 at 12:01
Calling .prop() doesn't change the HTML of the checkbox, it just changes it's current state. You could try .attr() but I'm not sure if this will do it either. — Rik Lewis
– Rik Lewis, Commented Feb 1, 2017 at 12:03
You are aware that setAttribute("id","selectedInputDrivers") will cause duplicate ID's... ID's should be unique. Also if you were using document.createElement() for your checkboxes you could use setAttribute("checked","checked") — NewToJS
– NewToJS, Commented Feb 1, 2017 at 12:03

Alex · Accepted Answer · 2017-02-01 13:04:17Z

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>

I see now, probably that was the case. Thank you for the good explanation

DigvijaySinh Zala · Accepted Answer · 2017-02-01 12:54:47Z

0

<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>

answered Feb 1, 2017 at 12:54

DigvijaySinh Zala

1

Collectives™ on Stack Overflow

How to add a checked checkbox element into Div dynamically?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related