如何動態地將已選中的復選框元素添加到Div中？

Question

我想創建一個JavaScript function ，在按下button ，獲取checkbox元素列表及其內容， 檢查所有 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>  

這里的問題是它檢查了我的列表中的所有checkboxes ，但在生成的HTML表單中，它們再次出現未選中狀態。 這有什么問題 ？ 謝謝

Answer 1

除了將prop（）替換為attr（），正如Rik Lewis正確推薦的那樣，您可以交替使用該線

$（“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> 

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>