I have created a dropdown filter with checkboxes for gender and category selection. Now, I want to ensure that the user selects at least one checkbox from each section (gender and category). However, I am struggling to figure out how to determine if a checkbox is empty or not.
Below is a snippet of the form for the filter dropdown:
<form class="" method="GET" action="manage_product.php">
<h6 class="dropdown-header px-0">Gender</h6>
<div class="form-check">
<input class="form-check-input" name="genderFil[]" type="checkbox" value="M" class="genderFil" id="genMale" <?= ($isMale == 1) ? "checked" : ""; ?>>
<label class="form-check-label" for="genMale">Male</label>
</div>
...
<input type="submit" class="button_primary" name="applyFilter" value="Apply" onclick="checkFilter()">
</form>
Here is my attempted JavaScript code for checking the selected checkboxes:
function checkFilter()
{
var res = true;
var checkedGender = $('input[class="genderFil"]:checked').length;
if(checkedGender < 1)
{
alert("Please select at least one gender!");
res = false;
}
var checkedCategory = $('input[class="categoryFil"]:checked').length;
if(checkedCategory < 1)
{
alert("Please select at least one category!");
res = false;
}
return res;
}
The form can only be submitted if there is at least one gender and one category checkbox checked.
If anyone knows how to detect whether a checkbox is empty or not, please share your insights!