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

Question

我想创建一个 JavaScript 函数，在按下 button 后，它会获取 checkbox 元素及其内容的列表，< strong>检查所有 checkboxes，用这些 checkboxes 创建一个 div 元素并将结果写入 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>  

这里的问题是它检查了我列表中的所有复选框，但在生成的HTML 表单 中，它们再次显示为未选中。它有什么错误？谢谢

Answer 1

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

$("formInput").find('.chk').prop("checked", 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);
					}

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