Frage Wie füge ich ein Checkbox-Element dynamisch in Div ein?


Ich möchte eine machen JavaScript function, die nach Drücken von a button, nimmt die Liste von checkbox Elemente mit ihrem Inhalt, überprüft alles das checkboxes, erstellt ein div Element mit diesen checkboxes und schreibt das Ergebnis in die HTML bilden. 

Hier ist mein Code:

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

Hier ist das HTML-Div-Element mit der Liste der Checkbox-Elemente. Sie erscheinen auch dynamisch. Anfangs ist Div leer.

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

Und das ist das HTML-Formular, in dem ich mein Ergebnis anzeigen möchte:

 <form id="formInput">    

</form>  

Das Problem hier ist, dass es alle überprüft checkboxes in meiner Liste, aber im Ergebnis HTML bilden sie erscheinen wieder unmarkiert. Was ist falsch damit? Vielen Dank


5
2018-02-01 11:57


Ursprung


Antworten:


Neben dem Ersetzen von prop () durch attr (), wie Rik Lewis es richtig empfohlen hat, kann man die Linie auch abwechselnd setzen

$ ("formInput"). find ('. chk'). prop ("überprüft", wahr);

am Ende der Funktion und fügen Sie das # -Zeichen vor der Selektor-ID wie folgt hinzu:

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>


1
2018-02-01 12:46



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

0
2018-02-01 12:54