动态多行复选框数据批量插入MySQL时的取值异常问题排查

我仔细看了你的代码，发现复选框值混乱的问题主要来自两个关键错误：

1. 重复的ID属性（违反HTML规范） #

你所有的表单元素（输入框、复选框、下拉框）都用了相同的ID，比如isHeadOfFamily、lName。当你复制行时，页面会出现多个ID完全相同的元素，这不仅不符合HTML规则，还会导致表单数据处理、JS选择器出现异常——浏览器无法正确区分这些元素，后端接收的数组自然会混乱。

2. 隐藏输入框的位置错误 #

你把隐藏框放在了<td>标签外面，这会导致每一行的复选框和隐藏框的[]数组索引完全错位。比如第一行的复选框是isHeadOfFamily[0]，但对应的隐藏框可能被分配到isHeadOfFamily[1]，后续新增行的索引会彻底打乱，后端拿到的数组顺序和实际行的对应关系完全错误。

修复后的完整代码 #

我已经帮你修正了这些问题，同时优化了动态行的添加/移除逻辑：

<?php include_once("connections/db.inc.php");
if(isset($_POST['submit'])){
    //insert people
    $lName=$_POST['lName'];
    $fName= $_POST['fName'];
    $mName= $_POST['mName'];
    $suffixName= $_POST['suffixName'];
    $gender= $_POST['gender'];
    $birthday= $_POST['birthday'];
    $phoneNumber= $_POST['phoneNumber'];
    $civilStatus= $_POST['civilStatus'];
    $isHeadofFamily=$_POST['isHeadOfFamily'];
    $isEmployed=$_POST['isEmployed'];
    $isSelfEmployedInBusiness=$_POST['isSelfEmployedInBusiness'];
    $isSelfEmployedInInformalSector=$_POST['isSelfEmployedInInformalSector'];
    $isSoloParent=$_POST['isSoloParent'];
    $isSeniorCitizen=$_POST['isSeniorCitizen'];
    $isPWD = $_POST['isPWD'];
    $relationToHeadOfFamily= $_POST['relationToHeadOfFamily'];
    
    // 注意：请确保$lastId是已定义的地址ID，否则需要补充获取逻辑
    foreach ($lName as $key => $value) {
        $sql = "INSERT INTO `people` (`addressId`, `lName`, `fName`, `mName`, `suffixName`, `gender`, `birthday`, `phoneNumber`, `civilStatus`, `isHeadOfFamily`, `isEmployed`, `isSelfEmployedInBusiness`, `isSelfEmployedInInformalSector`, `isSoloParent`, `isSeniorCitizen`, `isPWD`, `relationToHeadOfFamily`) VALUES (:lastId,:a2,:b2,:c2,:d2,:e2,:f2,:g2,:h2,:i2,:j2,:k2,:l2,:m2,:n2,:o2,:p2)";
        $stmt = $db->prepare($sql);
        $stmt->bindParam(":lastId",$lastId);
        $stmt->bindParam(":a2",$lName[$key]);
        $stmt->bindParam(":b2",$fName[$key]);
        $stmt->bindParam(":c2",$mName[$key]);
        $stmt->bindParam(":d2",$suffixName[$key]);
        $stmt->bindParam(":e2",$gender[$key]);
        $stmt->bindParam(":f2",$birthday[$key]);
        $stmt->bindParam(":g2",$phoneNumber[$key]);
        $stmt->bindParam(":h2",$civilStatus[$key]);
        $stmt->bindParam(":i2",$isHeadofFamily[$key]);
        $stmt->bindParam(":j2",$isEmployed[$key]);
        $stmt->bindParam(":k2",$isSelfEmployedInBusiness[$key]);
        $stmt->bindParam(":l2",$isSelfEmployedInInformalSector[$key]);
        $stmt->bindParam(":m2",$isSoloParent[$key]);
        $stmt->bindParam(":n2",$isSeniorCitizen[$key]);
        $stmt->bindParam(":o2",$isPWD[$key]);
        $stmt->bindParam(":p2",$relationToHeadOfFamily[$key]);
        $stmt->execute();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BRGY</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            // 定义行模板：移除所有重复ID，将隐藏框放入对应td内，新增行使用移除按钮
            const rowTemplate = `
            <tr>
                <td><input type="text" name="lName[]"></td>
                <td><input type="text" name="fName[]"></td>
                <td><input type="text" name="mName[]"></td>
                <td><input type="text" name="suffixName[]"></td>
                <td>
                    <select name="gender[]">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </td>
                <td><input type="date" name="birthday[]"></td>
                <td><input type="text" name="phoneNumber[]"></td>
                <td>
                    <select name="civilStatus[]">
                        <option value="Single">Single</option>
                        <option value="Married">Married</option>
                        <option value="Widowed">Widowed</option>
                    </select>
                </td>
                <td>
                    <input type="hidden" name="isHeadOfFamily[]" value="0">
                    <input type="checkbox" name="isHeadOfFamily[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isEmployed[]" value="0">
                    <input type="checkbox" name="isEmployed[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isSelfEmployedInBusiness[]" value="0">
                    <input type="checkbox" name="isSelfEmployedInBusiness[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isSelfEmployedInInformalSector[]" value="0">
                    <input type="checkbox" name="isSelfEmployedInInformalSector[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isSoloParent[]" value="0">
                    <input type="checkbox" name="isSoloParent[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isSeniorCitizen[]" value="0">
                    <input type="checkbox" name="isSeniorCitizen[]" value="1">
                </td>
                <td>
                    <input type="hidden" name="isPWD[]" value="0">
                    <input type="checkbox" name="isPWD[]" value="1">
                </td>
                <td>
                    <select name="relationToHeadOfFamily[]">
                        <option value="Spouse">Spouse</option>
                        <option value="Child">Child</option>
                        <option value="Sibling">Sibling</option>
                        <option value="Parent">Parent</option>
                        <option value="None">None</option>
                    </select>
                </td>
                <td><button type="button" class="remove-row">Remove</button></td>
            </tr>`;

            // 绑定添加行事件（事件委托，支持动态生成的按钮）
            $("#table_input-people").on('click','.add-row',function(){
                $("#table_input-people").append(rowTemplate);
            });

            // 绑定移除行事件（限制至少保留一行）
            $("#table_input-people").on('click','.remove-row',function(){
                if($("#table_input-people tr").length > 2){
                    $(this).closest('tr').remove();
                }
            });
        });
    </script>
</head>
<body>
    <?php include_once("nav.php") ?>
    <div>
        <form action="" method="post">
            <table class="table table-bordered" id="table_input-people">
                <tr>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>Middle Name</th>
                    <th>Suffix</th>
                    <th>Gender</th>
                    <th>Birthday</th>
                    <th>Phone Number</th>
                    <th>Civil Status</th>
                    <th>Are you the</think_never_used_51bce0c785ca2f68081bfa7d91973934>