如何通过Ajax传递选中分类复选框ID并实现子分类按需显隐

已实现勾选分类复选框时，将分类ID通过Ajax传递并在当前页面显示对应子分类，但存在以下问题：勾选多个分类后取消其中一个时，所有子分类都会被隐藏。需要实现取消某个分类时，仅隐藏该分类对应的子分类。

原代码展示 #

原Ajax代码 #

<script>
function showUser(str) {
  if (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();
  }
}
</script>

原jQuery代码 #

<script>
$(function() {
  $('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked')) {
      showUser($(this).val());
    } else {
      showUser("");
    }
  });
});
</script>

原分类复选框代码 #

<?php
foreach($cat as $row)
{
?> 
<input class = "messageCheckbox" type = "checkbox" id = "check" value = "<?php echo $row["id"]; ?>">
<label for = "check"><?php echo $row["name"]; ?></label>
<?php
}
?>
<br>
<div id="txtHint"><b></b></div>

原getsubcat.php代码 #

<?php
$q = intval($_GET['q']);
$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>

核心思路是给每个分类对应的子分类容器添加唯一标识，取消勾选时精准定位并移除对应容器，而非清空所有内容。

1. 修复getsubcat.php：返回带分类ID标识的容器 #

让子分类外层容器绑定对应分类ID，同时修复SQL注入风险：

<?php
$q = intval($_GET['q']);
// 使用预处理语句防止SQL注入
$stmt = $link->prepare("SELECT * FROM subcat WHERE cat_id = ?");
$stmt->bind_param("i", $q);
$stmt->execute();
$result = $stmt->get_result();
?>
<!-- 添加分类ID作为容器唯一标识 -->
<div class="subcat-container" id="subcat-<?php echo $q; ?>">
  <?php
  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 
  }
  ?>
</div>

2. 修改Ajax函数：精准插入子分类容器 #

避免重复添加，仅在容器不存在时插入内容：

<script>
function showUser(catId) {
  if (catId == "") return;
  
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var parentContainer = document.getElementById("txtHint");
      var existingSubcat = document.getElementById("subcat-" + catId);
      // 仅当容器不存在时添加
      if (!existingSubcat) {
        parentContainer.insertAdjacentHTML('beforeend', this.responseText);
      }
    }
  };
  xmlhttp.open("GET","getsubcat.php?q="+catId,true);
  xmlhttp.send();
}
</script>

3. 修改jQuery事件：取消勾选时移除对应子容器 #

直接根据分类ID定位并删除对应子分类容器：

<script>
$(function() {
  $('input.messageCheckbox').on('change', function() {
    var catId = $(this).val();
    if($(this).is(':checked')) {
      showUser(catId);
    } else {
      // 移除当前分类对应的子容器
      $("#subcat-" + catId).remove();
    }
  });
});
</script>

4. 修正分类复选框的ID唯一性问题 #

原代码中复选框ID重复，不符合HTML规范，改为带分类ID的唯一值：

<?php
foreach($cat as $row)
{
?> 
<input class="messageCheckbox" type="checkbox" id="check-<?php echo $row["id"]; ?>" value="<?php echo $row["id"]; ?>">
<label for="check-<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></label>
<?php
}
?>
<br>
<div id="txtHint"><b></b></div>

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