How to print the selected checkbox values after submit

Question

Here is the my checkbox list and the button which I need to submit the data..

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

I am using below class when button clicked..

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 ;

}

From above method I could see only one value in checkboxvalues as in the image when button clicked eventhough I have checked several checkboxes.

Can someone show me how to improve my code to show all the values when I checked several checkboxes?

If both check1 and check2 selected output should be

Output:

 You have selected INT,MV

Answer 1

You are using if else if statements so once one of the statements gets executed, the rest aren't getting executed. You can try an if statement for each checkbox, it will get the job done.

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 + ","; 
}

Answer 2

You are using an if-else ladder, which means if one of those conditions satisfies and gets executed, other blocks will be ignored. You can use multiple if blocks to avoid this situation.