Bagaimanakah saya boleh menghantar id kotak semak yang ditandakan yang mengandungi kategori kepada ajax dan memaparkan subkategori yang berkaitan dengan kotak semak yang ditandai itu?

Question

Saya berjaya menghantar nilai kotak pilihan yang merupakan id kategori apabila kotak pilihan ditandakan dan menunjukkan subkategori yang berkaitan dengan subkategori yang dipilih pada halaman yang sama tetapi apabila mengklik berbilang kategori dan menyahtanda semua sekali lagi saya menghadapi masalah untuk tidak memaparkan subkategori apabila ia berada dalam salah satu kategori. Semasa saya menyemak dan menyahtanda nilai pada bila-bila masa, saya mahu menyekat hanya menunjukkan subkategori kategori yang tidak ditanda. Ini kod saya harap anda faham maksud saya terima kasih

**muka**

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

Kotak Semak Kategori

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


?>

Saya cuba menyelesaikan masalah menggunakan kod pertanyaan j yang dilampirkan tetapi apabila saya menyemak kotak semak ia menunjukkan semua subkategori dengan kotak semak ditandakan tetapi apabila mana-mana satu kotak dinyahtanda ini tidak menunjukkan semua subkategori Kategori

Answer 1

Masalahnya ialah, apabila menyahtanda mana-mana kotak semak, anda sebenarnya mengosongkan semuanya:

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

Untuk menyelesaikan masalah ini, anda perlu mengenal pasti elemen yang diberikan cat_id entah bagaimana, contohnya anda boleh menambah atribut data:

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

Apabila anda ingin menyahtanda kotak pilihan, anda boleh menggunakan atribut data ini untuk mencari elemen yang ingin anda alih keluar:

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