How can I send the id of a checked checkbox containing a category to ajax and display the subcategories related to that checked checkbox?

Question

I successfully send the checkbox value which is the category id when the checkbox is checked and show the subcategories related to the selected subcategory on the same page but when clicking multiple categories and canceling again I have a problem with selecting one of the categories where all the subcategories are undisplayed. As I check and uncheck the values ​​at any time, I want to suppress showing only the subcategories of the unchecked category. This is my code hope you understand what I mean thanks

**Face**

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

Category checkbox

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


?>

I am trying to solve the problem using the attached j query code but when I check the checkbox it shows all the subcategories with the checkbox checked but when any one box is unchecked this unshows it All subcategories

Answer 1

The problem is that when you uncheck any checkbox, you actually clear everything:

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("");
    }

To solve this problem you need to identify the element given cat_id somehow, for example you can add a data attribute:

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

When you want to uncheck the checkbox, you can use this data attribute to find the element you want to remove:

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);
    }
});