动态管理多选分类与子分类：基于Ajax和jQuery的交互式实现

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) {
        // 将新内容追加到容器中
        document.getElementById("txtHint").innerHTML += this.responseText;
      }
    };
    xmlhttp.open("POST","getsubcat.php?q="+str,true);
    xmlhttp.send();
  }
}

$(function() {
  $('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked')) {
      showUser($(this).val()); // 选中时加载子分类
    } else {
      showUser(""); // 未选中时，调用showUser("")，清空所有子分类
    }
  });
});

<?php
$q = intval($_GET['q']); // 获取父分类ID

$result = $link->query("SELECT * FROM subcat WHERE cat_id = '".$q."'");
?>
<div class = "checkbox">
<?php
while($row = mysqli_fetch_array($result)) {
?>
<input type="checkbox" id="sub_cat" name="sub_cat" value="<?php echo $row['subcat']; ?>">
<label for="sub_cat"> <?php echo $row['subcat'];  ?></label><br>
<?php 
}
?>
</div>

<?php
$q = intval($_GET['q']); // 获取父分类ID

// 建议使用预处理语句来防止SQL注入
// $stmt = $link->prepare("SELECT * FROM subcat WHERE cat_id = ?");
// $stmt->bind_param("i", $q);
// $stmt->execute();
// $result = $stmt->get_result();

$result = $link->query("SELECT * FROM subcat WHERE cat_id = '".$q."'"); // 简化示例，实际生产环境请使用预处理语句

// 为每个子分类创建一个唯一的容器，或者直接在子分类元素上添加data-cat属性
// 这里我们选择在每个子分类的input和label上添加data-cat属性
?>
<!-- 建议为每个父分类的子分类创建一个独立的容器，并带有data-cat属性，以便整体移除 -->
<div class="subcategory-group" data-cat="<?php echo $q; ?>">
<?php
while($row = mysqli_fetch_array($result)) {
    // 注意：id属性在HTML文档中必须是唯一的。
    // 如果这里每个子分类的id都设为"sub_cat"，会导致HTML不符合规范。
    // 可以考虑将id改为name属性，或者动态生成唯一ID。
    $subcat_id = 'sub_cat_' . $row['id'] . '_' . $q; // 生成唯一ID示例
?>
    <input type="checkbox" id="<?php echo $subcat_id; ?>" name="sub_cat[]" value="<?php echo $row['subcat']; ?>" data-cat="<?php echo $q; ?>">
    <label for="<?php echo $subcat_id; ?>" data-cat="<?php echo $q; ?>"> <?php echo $row['subcat'];  ?></label><br>
<?php 
}
?>
</div>

// 新增的隐藏/移除子分类函数
function hideUser(categoryId) {
   // 使用jQuery选择器，根据data-cat属性移除所有关联的子分类元素
   // 如果子分类是包裹在带有data-cat的div中，则直接移除该div
   $('.subcategory-group[data-cat="' + categoryId + '"]').remove();
   // 如果是直接在input/label上添加data-cat，则可以这样移除：
   // $('[data-cat="' + categoryId + '"]').remove(); 
}

$(function() {
  $('input[type=checkbox]').on('change', function() {
    const categoryId = $(this).val(); // 获取当前操作的父分类ID
    if($(this).is(':checked')) {
      showUser(categoryId); // 选中时加载子分类
    } else {
      hideUser(categoryId); // 未选中时，调用hideUser移除对应子分类
    }
  });
});

<script>
// Ajax请求函数：加载子分类
function showUser(categoryId) {
  if (categoryId === "") {
    // 理论上，在新的逻辑中，这个分支不会被触发来清空所有内容
    // 因为我们有了hideUser来精准移除
    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("GET","getsubcat.php?q="+categoryId,true); // 建议使用GET，因为是查询操作
    xmlhttp.send();
  }
}

// 隐藏/移除子分类函数
function hideUser(categoryId) {
   // 使用jQuery选择器，根据data-cat属性移除所有关联的子分类元素
   $('.subcategory-group[data-cat="' + categoryId + '"]').remove();
}

// jQuery事件处理：监听父分类复选框的变化
$(function() {
  // 监听所有类型为checkbox的input元素的change事件
  $('input[type=checkbox]').on('change', function() {
    const categoryId = $(this).val(); // 获取当前复选框的值（即父分类ID）
    if($(this).is(':checked')) {
      showUser(categoryId); // 如果复选框被选中，则加载其子分类
    } else {
      hideUser(categoryId); // 如果复选框被取消选中，则移除其对应的子分类
    }
  });
});
</script>