How to check the checked/unchecked state and show the alert box with javascript?

I want to do is, if i didn't select the checkboxes and skip, it have to show "Please choose at least one approver for your request." But it didn't show in my codes. I will provide both codes. In $ary_approver left sides are names as $k and eight side (emails) are values $v. (approver_name) database and in $ary_approver name list are the same. Also emails. HTML starts under $cnt=0

    $ary_approver = array(
  "Albert Chin"       => "albert.chin@eg.com",
  "Alberto Leotti"    => "alberto.leotti@eg.com",
  "Alex Koh"          => "alex.koh@eg.com",
  "Bala Subbu"        => "bala.subbu@eg.com",
  "Bertrand Seow"     => "bertrand.seow@eg.com",
  "Calvin Goh Chin Boon"     => "calvin.goh@eg.com",
  "Chan Boon Hock"           => "boon-hock.chan@eg.com",
  "Cheng Kear Yong"   => "kear-yong.cheng@eg.com",
  "Cheng Kong Meng"   => "kong-meng.cheng@eg.com",
  "Chia Yeow Chong"   => "yeowchong.chia@eg.com",
  "Chong Chan Sin"    => "chan-sin.chong@eg.com"};
$sql = "Select distinct(approver_name) from access_request.tbl_access_area where ".$area_clause."";
$result = mysqli_query($conn,$sql);

    $cnt = 0;

echo "<table align=\"center\" border=\"0\" width=\"95%\" bordercolor=\"#DADADA\" cellpadding=\"3\" cellspacing=\"1\">\n";
echo  "<tr bgcolor=\"#F5F5F5\">
<td align=\"left\" colspan=\"5\">\n";
    echo  "<font face=\"arial\" size=\"2\" color=\"#3C5F84\">&nbsp Approver &nbsp</font>";
    echo  "</td></tr>\n";
    echo "&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";
    echo "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\" style=\"
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
    grid-gap: 10px;
    margin-left:138px;
    margin-top:-23px;\">";

    while($row = mysqli_fetch_array($result)){
        foreach($ary_approver as $k => $v){


            if($k == $row["approver_name"]){
                echo "<input type=\"checkbox\" id=\"chkApprover" . $cnt . "\" name=\"chkApprover[]\" value=\"$v\"><font face=\"arial\" size=\"2\" color=\"#3C5F84\">". $k . "</font>";
                //echo "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";
            }
        }
        $cnt++;
    }

    echo  "</td></tr>\n";
    echo  "</td></tr>\n";
    echo "<tr bgcolor=\"#F5F5F5\"></tr>\n";
    echo  "</table>\n";

Below is javascript.

var alist = '';
  var list = document.getElementsByName('chkApprover[]');

  for (i = 0; i < list.length; i++) {
    if (document.getElementById('chkApprover' + i).checked == true) {
      alist = alist + list[i].value + '|';
    }
  }
  
  if (alist == '') {
    alert("Please choose at least one Approver for your request!");