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

Question

我想创建一个JavaScript函数，它可以在按下按钮后获取复选框元素列表及其内容，勾选所有复选框，创建一个包含这些复选框的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表单中，它们又变成未选中状态。有什么问题吗？谢谢。

- FalseScience

---

请添加HTML。 - RahulB

你能给我们展示一份代码的工作示例吗？仅仅从这段JS中很难看出哪里有问题。 - Rory McCrossan

你能创建一个 http://codepen.io/ 并将链接添加到你的问题吗？ - Adam

调用.prop()不会更改复选框的HTML，它只会更改其当前状态。你可以尝试使用.attr()，但我不确定这是否有效。 - Rik Lewis

你应该知道 setAttribute("id","selectedInputDrivers") 会导致重复的 ID，而 ID 应该是唯一的。如果你正在使用 document.createElement() 来创建复选框，那么可以使用 setAttribute("checked","checked")。 - NewToJS

哦，太棒了！.attr()解决了这个问题。谢谢，Rik Lewis :) - FalseScience

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>

- Alex

---

添加了一个可工作的代码片段.. 也许你忘记了 # 符号？ - Alex

我现在明白了，可能就是这种情况。感谢您的好解释。 - FalseScience

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>

- DigvijaySinh Zala