Comment ajouter dynamiquement un élément de case à cocher cochée dans un Div ?

Question

Je veux faire un JavaScript function qui, après avoir appuyé sur la touche button prend la liste des checkbox avec leur contenu, vérifie tout el checkboxes crée un div avec ces checkboxes et écrit le résultat dans le fichier HTML formulaire.

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

Voici l'élément HTML Div avec la liste des éléments de case à cocher. Ils apparaissent également de manière dynamique. Initialement, Div est vide.

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

Et voici le formulaire HTML, où je veux que mon résultat apparaisse :

 <form id="formInput">    

</form>  

Le problème ici est qu'il vérifie tous les checkboxes dans ma liste, mais dans le résultat HTML formulaire ils apparaissent à nouveau non vérifiés. Qu'est-ce que mauvais avec elle ? Merci.

Answer 1

En plus de remplacer prop() par attr() comme Rik Lewis l'a correctement recommandé, vous pouvez alternativement mettre la ligne

$("formInput").find('.chk').prop("checked", true) ;

au bas de la fonction et ajoutez le caractère # devant l'id du sélecteur comme ceci :

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>