如何將包含類別的選取核取方塊的 id 傳送到 ajax 並顯示與該選取核取方塊相關的子類別？

Question

我成功地發送了複選框值，該值是選中復選框時的類別ID，並在同一頁上顯示與所選子類別相關的子類別，但當單擊多個類別並再次取消選取所有子類別所在的類別之一時，我遇到了問題取消顯示。當我隨時檢查和取消選取值時，我想取消僅顯示未選取類別的子類別。這是我的程式碼希望你明白我的意思謝謝

**臉**

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

J查詢

<script>
         
          $(function() {
    //code here
    $('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 
}


?>

我正在嘗試使用附加的j查詢代碼來解決問題，但是當我選中復選框時，它顯示了所有選中復選框的子類別，但是當取消選中任何一個框時，這將取消顯示所有子類別

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