Comment imprimer la valeur de la case à cocher sélectionnée après la soumission

Question

Voici ma liste de cases à cocher et de boutons dont j'ai besoin pour soumettre des données..

<label>Access Locations </label>
     <br />


     <input type="checkbox" name="chk[]" id="check1" class="pl" value="INT" /> dummy1
     <input type="checkbox" name="chk[]" id="check2" class="pl" value="MV" /> dummy2
     <input type="checkbox" name="chk[]" id="check3" class="pl" value="FV" /> dummy3
     <input type="checkbox" name="chk[]" id="check4" class="pl" value="PS" /> dummy4

     <br />
     <h4 name ="checkboxvalues" style="color:green" id="result_checkbox"></h4>  
    
     <input type="hidden" name="employee_id_update" id="employee_id_update" />
     <input onclick="getCheckboxValue()" type="submit" name="insert" id="insert" value="Update" class="btn btn-success" />

J'utilise la classe ci-dessous lorsque je clique sur le bouton..

function getCheckboxValue() {

var l1 = document.getElementById("check1");
var l2 = document.getElementById("check2");
var l3 = document.getElementById("check3");
var l4 = document.getElementById("check4");

 
var res=" "; 
if (l1.checked == true){
  var pl1 = document.getElementById("check1").value;
  res = pl1 + ","; 
} 
else if (l2.checked == true ){
  var pl2 = document.getElementById("check2").value;
  res = res + pl2 + ","; 
}
else if (l3.checked == true){
document.write(res);
  var pl3 = document.getElementById("check3").value;
  res = res + pl3 + ","; 
}
else if (l4.checked == true){
  var pl4 = document.getElementById("check4").value;
  res = res + pl4 + ","; 
}

return document.getElementById("result_checkbox").innerHTML = "You have selected " + res ;

}

À partir de la méthode ci-dessus, bien que plusieurs cases soient cochées, lorsque je clique sur le bouton, je ne vois qu'une seule valeur dans checkboxvalues comme indiqué dans l'image.

Quelqu'un peut-il me dire comment améliorer mon code pour afficher toutes les valeurs lorsque plusieurs cases sont cochées ?

Si check1 et check2 sont sélectionnés, le résultat devrait être

Sortie :

You have selected INT,MV

Answer 1

Vous utilisez un diagramme à contacts if-else, ce qui signifie que si l'une des conditions est remplie et exécutée, les autres blocs seront ignorés. Vous pouvez utiliser plusieurs blocs if pour éviter cela.

Answer 2

Vous utilisez des instructions if else if, donc une fois l'une d'entre elles exécutée, les autres ne seront pas exécutées. Vous pouvez essayer une instruction if pour chaque case à cocher et cela fera le travail.

var res=" "; 
if (l1.checked == true){
  var pl1 = document.getElementById("check1").value;
  res = pl1 + ","; 
} 
if (l2.checked == true ){
  var pl2 = document.getElementById("check2").value;
  res = res + pl2 + ","; 
}
if (l3.checked == true){
document.write(res);
  var pl3 = document.getElementById("check3").value;
  res = res + pl3 + ","; 
}
if (l4.checked == true){
  var pl4 = document.getElementById("check4").value;
  res = res + pl4 + ","; 
}