点击提交触发Uncaught TypeError: Cannot read 'value'属性错误

错误原因分析 #

控制台抛出Uncaught TypeError: Cannot read properties of undefined (reading 'value')，根源有三点：

1. 重复ID问题：HTML中ID必须唯一，但循环生成的所有checkbox都用了相同的id="chkzone"，导致DOM查询无法正确定位元素。
2. 变量名错误：PHP代码里checkbox的value="$zone"，但定义的变量是$field4name = $row["zone"];，$zone是未定义变量，会导致checkbox的value为空或无效。
3. 多Checkbox的DOM获取方式错误：多个同name的checkbox在DOM中是集合（NodeList）而非单个元素，直接调用.value会因为集合无该属性报错。

修复步骤 #

1. 修正PHP代码 #

调整循环生成的checkbox，修复ID唯一性、变量名错误，并优化name属性以便后端接收多选值：

while ($row = mysqli_fetch_assoc($result1)) {
    $field1name = $row["lotid"];
    $field2name = $row["product"];
    $field3name = $row["ewsflow"];
    $field4name = $row["zone"];
    // 修复：PHP字符串拼接用.而非+，原代码的+会触发数值运算导致key错误
    $key = $field1name . ":" . $field2name . ":" . $field3name;

    if (!in_array($key, $arr)){
        echo "<tr>";
        echo "<th >Lot ID:</th>";
        echo "<td >$field1name</td>";
        echo "</tr>";

        echo "<tr>";
        echo "<th>Product:</th>";
        echo "<td>$field2name</td>";
        echo "</tr>";

        echo "<tr>";
        echo "<th>EWSFLOW: </th>";
        echo "<td>$field3name</td>";
        echo "</tr>";

        array_push($arr, $key);
    }

    echo "<tr>";
    echo "<th>Zone - $field4name</th>";
    // 修复：ID设为唯一值，value用正确变量$field4name，name加[]支持多选
    echo "<td><input type=\"checkbox\" name=\"chkzone[]\" id=\"chkzone_$field4name\" value=\"$field4name\"></td>";
    echo "</tr>";
}

2. 修正JavaScript代码 #

修改获取选中checkbox的逻辑，遍历所有同name的checkbox并收集选中值：

// 获取所有name为chkzone[]的checkbox
const checkboxes = document.querySelectorAll('input[name="chkzone[]"]');
// 收集选中的value
const selectedZones = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

// 校验是否有选中项
if (selectedZones.length === 0) {
    alert("请选择要禁用的Correlationwafer区域。");
    return false;
}

// 将选中的zone参数拼接，适配后端接收逻辑
const chkzoneParam = selectedZones.map(zone => `chkzone[]=${zone}`).join('&');
document.getElementById("result").innerHTML = SynReqData(reqHttp2, `correlationwafer_result.php?productlotid=${productlotid}&${chkzoneParam}`);
return false;

若业务只允许单选，可将checkbox的name改回chkzone，并调整JS逻辑取第一个选中项即可。

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