गतिशील रूप से 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

धन्यवाद प्रोप() attr के लिए() की जगह इसके अलावा के रूप में आप बारी-बारी से लाइन डाल सकते हैं

$ ("formInput")। लगता है ('। जच')। सहारा ("जाँच ", सच);

समारोह के तल पर और इस तरह चयनकर्ता आईडी सामने # चरित्र जोड़ें:

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

---

\t \t \t \t \t function confirmDrivers() { 
 
\t \t \t \t \t $('#selectedList').find('.chk').prop("checked", true); 
 
\t \t \t \t \t var list = document.getElementById('selectedList').getElementsByTagName("li"); 
 
\t \t \t \t \t var myForm = document.getElementById('formInput'); 
 
\t \t \t \t \t var text = "<strong>Selected Drivers: </strong> <br><br>"; 
 
\t \t \t \t \t var myDiv = document.createElement("div"); 
 
\t \t \t \t \t myDiv.setAttribute("id", "selectedInputDrivers"); 
 
\t \t \t \t \t myDiv.style.overflowY = "auto"; 
 
\t \t \t \t \t myDiv.style.maxHeight = "100px"; 
 
\t \t \t \t \t myDiv.style.maxWidth = "250px"; 
 

 
\t \t \t \t \t for (i = list.length - 1; i >= 0; i--) { 
 
\t \t \t \t \t  myDiv.innerHTML = list[i].innerHTML + '<br>' + myDiv.innerHTML; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML; 
 
\t \t \t \t \t myForm.innerHTML = text + myForm.innerHTML; 
 
\t \t \t \t \t $("#formInput").find('.chk').prop("checked", true); 
 
\t \t \t \t \t }

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