动态管理复选框关联子项：基于AJAX和数据属性的解决方案

<?php
// 假设 $cat 包含类别数据，例如：
// $cat = [
//     ["id" => 1, "name" => "电子产品"],
//     ["id" => 2, "name" => "服装"],
// ];
foreach($cat as $row) {
?>
    <input class="messageCheckbox" type="checkbox" id="category_<?php echo $row["id"]; ?>" value="<?php echo $row["id"]; ?>">
    <label for="category_<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></label>
<?php
}
?>
<br>
<div id="txtHint"><b></b></div>

<?php
// 假设 $link 是数据库连接对象
$q = intval($_GET['q']);

$result = $link->query("SELECT * FROM subcat WHERE cat_id = '".$q."'");

// 初始版本，仅输出子类别复选框
while($row = mysqli_fetch_array($result)) {
?>
    <input type="checkbox" id="sub_cat_<?php echo $row['id']; ?>" name="sub_cat[]" value="<?php echo $row['subcat']; ?>">
    <label for="sub_cat_<?php echo $row['id']; ?>"> <?php echo $row['subcat'];  ?></label><br>
<?php
}
?>

// AJAX 请求函数
function showUser(str) {
  if (str === "") {
    // 初始缺陷：当str为空时，会清空所有内容
    document.getElementById("txtHint").innerHTML = ""; 
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        // 将新内容追加到txtHint
        document.getElementById("txtHint").innerHTML += this.responseText;
      }
    };
    xmlhttp.open("POST","getsubcat.php?q="+str,true);
    xmlhttp.send();
  }
}

// jQuery 监听复选框变化
$(function() {
    $('input[type=checkbox].messageCheckbox').on('change', function() {
        if($(this).is(':checked')) {
            showUser($(this).val()); // 选中时添加子类别
        } else {
            showUser(""); // 缺陷：取消选中时，调用showUser("")会清空所有子类别
        }
    });
});

<?php
// 假设 $link 是数据库连接对象
$q = intval($_GET['q']);

$result = $link->query("SELECT * FROM subcat WHERE cat_id = '".$q."'");

// 改进版本：为每个子类别元素添加 data-cat 属性
while($row = mysqli_fetch_array($result)) {
?>
    <div class="subcategory-item" data-cat="<?php echo $q; ?>">
        <input type="checkbox" id="sub_cat_<?php echo $row['id']; ?>" name="sub_cat[]" value="<?php echo $row['subcat']; ?>">
        <label for="sub_cat_<?php echo $row['id']; ?>"> <?php echo $row['subcat'];  ?></label>
    </div>
<?php
}
?>

// AJAX 请求函数（保持不变，负责添加内容）
function showUser(categoryId) {
  if (categoryId === "") {
    // 此处不再清空所有内容，因为我们有了更精细的移除机制
    return; 
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        // 将新内容追加到txtHint
        document.getElementById("txtHint").innerHTML += this.responseText;
      }
    };
    xmlhttp.open("POST","getsubcat.php?q="+categoryId,true);
    xmlhttp.send();
  }
}

// 新增函数：根据类别ID隐藏/移除对应的子类别
function hideUser(categoryId) {
   // 使用jQuery选择器，查找所有data-cat属性等于categoryId的元素，并将其移除
   $('[data-cat="' + categoryId + '"]').remove();
}

// jQuery 监听复选框变化
$(function() {
    $('input[type=checkbox].messageCheckbox').on('change', function() {
        const categoryId = $(this).val(); // 获取当前复选框的值（即类别ID）
        if($(this).is(':checked')) {
            showUser(categoryId); // 选中时调用 showUser 添加子类别
        } else {
            hideUser(categoryId); // 取消选中时调用 hideUser 移除对应子类别
        }
    });
});