Javascript/JQuery多复选框仅返回单个值问题排查求助

用户编写的Javascript/JQuery脚本处理多个复选框时，仅返回单个选中值而非所有选中项的值，以下是排查和修复方案：

错误点分析 #

1. 复选框选择器范围过大 #

原代码中$(" :checked")会选中页面上所有被勾选的元素，如果页面存在其他复选框，会混入无关数据，同时未限定目标复选框的范围。

2. AJAX数据传递结构错误 #

原代码将cblist作为嵌套对象传递，导致PHP端接收的数据结构不符合预期，无法正确读取所有选中的period值。

3. PHP变量名拼写错误 #

PHP循环中使用了未定义的变量$pilihperiode，与循环变量$pilihperiod拼写不一致，会引发报错。

4. HTML函数调用不匹配 #

按钮的onClick事件调用的是getProsesAlo<?=$no;?>()，但JS中定义的函数是getProsesAlo()，函数名不匹配导致无法触发正确逻辑。

修正后的代码 #

1. Javascript/JQuery代码 #

function getProsesAlo() {
  // 仅选中name为period[]的已勾选复选框，将值转为数组
  var selectedPeriods = $("input[name='period[]']:checked").map(function() {
    return $(this).val();
  }).get();

  $.post("proses-alokasi.php", {
    nama: frmProses.fnama.value,
    prono: frmProses.fprono.value,
    thn: frmProses.ftahun.value,
    period: selectedPeriods // 直接传递数组，PHP端自动解析为$_POST['period']
  }, function(output) {
    $("#statusmsg").html(output).fadeIn(1000); 
  });
}

2. HTML表单代码 #

修正按钮的函数调用，确保与JS函数名一致：

<input type="text" name="fprono">
<input type="text" name="fnama">
<select id="tahun" name="ftahun" class="form-control form-control-md">
    <option value="">Tahun:</option>
    <?php
    for ($i=$tahun; $i >= $tahunmin; $i--){
    ?>
    <option value="<?=$i;?>"><?=$i;?></option>
    <?php
    }
    ?>
</select>
<input type="checkbox" name="period[]" value="1">
<input type="checkbox" name="period[]" value="2">
<!-- 省略其他月份复选框 -->
<input type="checkbox" name="period[]" value="12">
<!-- 修正函数调用，去掉多余的<?=$no;?> -->
<input type="button" value="Proses" id="proses" onClick="getProsesAlo()">
<!----- Result ----->
<div id="statusmsg">Unprocessed</div>

3. PHP代码（proses-alokasi.php） #

修正变量名，并正确读取传递的period数组：

<?php
$prono = $_POST['prono'] ?? '';
$namaang = $_POST["nama"] ?? '';
$thn = $_POST["thn"] ?? '';
$periode = $_POST['period'] ?? [];

if(!empty($periode)) {
    $checked_count = count($periode);
    foreach($periode as $pilihperiod){
        echo "<p>".$pilihperiod ."</p><br>";
        // 若需要重复输出，修正变量名为$pilihperiod
        // echo "<p>".$pilihperiod."</p><br>";
    }
} else {
    echo "<b>Please Select At least One Option.</b>";
}
?>

内容的提问来源于stack exchange，提问作者Baskoro