Wie kann ich die ID eines aktivierten Kontrollkästchens, das eine Kategorie enthält, an Ajax senden und die Unterkategorien anzeigen, die sich auf dieses aktivierte Kontrollkästchen beziehen?

Question

Ich sende erfolgreich den Kontrollkästchenwert, der die Kategorie-ID darstellt, wenn das Kontrollkästchen aktiviert ist, und zeige die Unterkategorien, die sich auf die ausgewählte Unterkategorie beziehen, auf derselben Seite an. Wenn ich jedoch auf mehrere Kategorien klicke und alles wieder deaktiviere, habe ich Probleme, eine Unterkategorie nicht mehr anzuzeigen, wenn sie darin enthalten ist eine der Kategorien. Da ich die Werte jederzeit an- und abwähle, möchte ich unterdrücken, dass nur die Unterkategorien der nicht markierten Kategorie angezeigt werden. Das ist mein Code. Ich hoffe, Sie verstehen, was ich meine, danke

**Gesicht**

<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() {
    //code here
    $('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked')) {
        showUser($(this).val());
    }
    
    
    else{
        
        showUser("");
    }
});
          
         
});
          
      </script>

Kategorie-Kontrollkästchen

<?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 
}


?>

Ich versuche, das Problem mithilfe des angehängten J-Abfragecodes zu lösen, aber wenn ich das Kontrollkästchen aktiviere, werden alle Unterkategorien mit aktiviertem Kontrollkästchen angezeigt. Wenn jedoch ein Kontrollkästchen deaktiviert ist, werden alle Unterkategorien der Kategorie

nicht angezeigt

Answer 1

问题是，当取消选中任何复选框时，您实际上会清除所有内容：

function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  ...
}
$('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked')) {
        showUser($(this).val());
    }
    
    
    else{
        
        showUser("");
    }

要解决这个问题，您需要以某种方式识别给定 cat_id 的元素，例如您可以添加数据属性：

<input type="checkbox" id="sub_cat" name="sub_cat" value="<?php echo $row['subcat']; ?>" data-cat="<?php echo $q ?>">
<label for="sub_cat" data-cat="<?php echo $q ?>"> <?php echo $row['subcat'];  ?></label><br>

当您想要取消选中该复选框时，您可以使用该数据属性找到要删除的元素：

function hideUser(str) {
   $('[data-cat="' + str + '"]').remove();
}

$('input[type=checkbox]').on('change', function() {
    const user = $(this).val();
    if($(this).is(':checked')) {
        showUser(user);
    } else{
        hideUser(user);
    }
});