JavaScript实现勾选checkbox时对应状态表格行的显示隐藏

核心逻辑优化 #

你原来用单变量存储选中状态的方式不利于批量判断，我们可以先把所有勾选的状态值存入数组，再逐行匹配当前行状态是否在允许展示的数组中即可。

完整修改后代码 #

function AA_Status_Durchsuchen() {
    // 声明变量
    let allowedStatus = [], table, tr, td, i, rowStatus;
    // 收集所有勾选的状态值到数组
    if (document.getElementById("statuserstellt").checked) allowedStatus.push(1);
    if (document.getElementById("statusgesperrt").checked) allowedStatus.push(4);
    if (document.getElementById("statuszurfreigabe").checked) allowedStatus.push(7);
    if (document.getElementById("statusrejected").checked) allowedStatus.push(8);
    if (document.getElementById("statusfreigegeben").checked) allowedStatus.push(9);
    
    table = document.getElementById("mainTable");
    tr = table.getElementsByTagName("tr");

    // 遍历所有表格行
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[4];
      if (td) {
        // 提取当前行的状态值，转为数字
        rowStatus = parseInt(td.textContent.trim(), 10);
        // 匹配判断：未勾选任何选项时默认显示所有，否则仅显示匹配状态的行
        if (allowedStatus.length === 0 || allowedStatus.includes(rowStatus)) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
}

适配说明 #

如果你的状态列内容不是纯数字（比如包含「状态1」「已创建（1）」这类混合文本），可以把行内判断逻辑替换为以下代码，即可匹配包含对应状态编号的行：

if (allowedStatus.length === 0 || allowedStatus.some(status => td.textContent.includes(status))) {

如果需要未勾选任何复选框时隐藏所有行，删除判断条件里的allowedStatus.length === 0 ||即可。

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