如何动态地将已选中的复选框元素添加到Div中？

Question

我想打一个JavaScript function,其中,按下后button,采取的名单checkbox与他们的内容元素,检查所有的checkboxes,创建一个div与这些元素checkboxes,并将结果写入HTML形式.

这是我的代码:

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

这是带有复选框元素列表的HTML Div元素.它们也是动态出现的.最初,Div是空的.

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

这是HTML表单,我希望我的结果出现在:

 <form id="formInput">    

</form>  

这里的问题是它检查了checkboxes我的列表中的所有内容,但是在结果HTML表单中它们再次出现未选中状态.这有什么问题？谢谢

Answer 1

除了按照 Rik Lewis 正确建议将 prop() 替换为 attr() 之外，您还可以将行

$("formInput").find('.chk').prop("已检查", true);

在函数底部并在选择器 ID 前面添加 # 字符，如下所示：

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);
}

					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);
					}