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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:
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); } });