Check whether input checkbox is empty using JavaScript

Question

I currently have a filter dropdown containing checkboxes. I have checkboxes for gender and category. I am now trying to make sure that the user will check at least one checkbox each part (gender and category). The problem is I don't know how to check whether the checkbox is empty or not.

Below is the partial 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>
    <div class="form-check">
        <input class="form-check-input" name="genderFil[]" type="checkbox" value="F" class="genderFil" id="genFemale" <?= ($isFemale == 1) ? "checked" : ""; ?>>
        <label class="form-check-label" for="genFemale">Female</label>
    </div>

    <div class="dropdown-divider"></div>

    <h6 class="dropdown-header px-0">Category</h6>
    <div class="form-check">
        <input class="form-check-input" name="categoryFil[]" type="checkbox" value="1" class="categoryFil" id="catShoes" <?= ($isShoes == 1) ? "checked" : ""; ?>>
        <label class="form-check-label" for="catShoes">Shoes</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="categoryFil[]" type="checkbox" value="2" class="categoryFil" id="catPants" <?= ($isPants == 1) ? "checked" : ""; ?>>
        <label class="form-check-label" for="catPants">Pants</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="categoryFil[]" type="checkbox" value="3" class="categoryFil" id="catShirts" <?= ($isShirts == 1) ? "checked" : ""; ?>>
        <label class="form-check-label" for="catShirts">Shirts</label>
    </div>

    <div class="dropdown-divider"></div>
    <input type="submit" class="button_primary" name="applyFilter" value="Apply" onclick="checkFilter()">
</form>

Below is the javascript that I tried to code:

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

It is only can be submitted if there is at least one gender and at least one category checked.

How can I check whether the checkbox is empty or not?

When selecting by class name, use input.genderFil or input.categoryFil. The "." is for classes because that's such a common way of identifying elements. — Pointy
– Pointy, Commented Dec 4, 2022 at 17:05

user3221512 · Accepted Answer · 2022-12-04 17:29:04Z

This will work.

function checkFilter()
{
    var res = true;


    var checkedGender = document.getElementById('genderSelector').querySelectorAll('input[type="checkbox"]:checked').length;        
    if(checkedGender < 1)
    {
        alert("Please select at least one gender!");
        res = false;
        return  res;
    }


    var checkedCategory = document.getElementById('categorySelector').querySelectorAll('input[type="checkbox"]:checked').length;
    if(checkedCategory < 1)
    {
        alert("Please select at least one category!");
        res = false;
        return res;
    }

    return res;
}

<form class="" method="GET" action="manage_product.php" onsubmit="return checkFilter();">
    <div id="genderSelector">
        <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>
        <div class="form-check">
            <input class="form-check-input" name="genderFil[]" type="checkbox" value="F" class="genderFil" id="genFemale" <?= ($isFemale == 1) ? "checked" : ""; ?>>
            <label class="form-check-label" for="genFemale">Female</label>
        </div>
    </div>

    <div class="dropdown-divider"></div>

    <div id="categorySelector">
        <h6 class="dropdown-header px-0">Category</h6>
        <div class="form-check">
            <input class="form-check-input" name="categoryFil[]" type="checkbox" value="1" class="categoryFil" id="catShoes" <?= ($isShoes == 1) ? "checked" : ""; ?>>
            <label class="form-check-label" for="catShoes">Shoes</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" name="categoryFil[]" type="checkbox" value="2" class="categoryFil" id="catPants" <?= ($isPants == 1) ? "checked" : ""; ?>>
            <label class="form-check-label" for="catPants">Pants</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" name="categoryFil[]" type="checkbox" value="3" class="categoryFil" id="catShirts" <?= ($isShirts == 1) ? "checked" : ""; ?>>
            <label class="form-check-label" for="catShirts">Shirts</label>
        </div>
    </div>

    <div class="dropdown-divider"></div>
    <input type="submit" class="button_primary" name="applyFilter" value="Apply">
</form>

user18540449 · Accepted Answer · 2022-12-04 15:42:56Z

0

A checkbox has two states: checked and unchecked.

To get the state of a checkbox, you follow these steps:

First, select the checkbox using a DOM method such as getElementById() or querySelector(). Then, access the checked property of the checkbox element. If its checked property is true, then the checkbox is checked; otherwise, it is not.

answered Dec 4, 2022 at 15:42

user18540449

1 Comment

Pointy Over a year ago

That is all right there in the code in the question.

Collectives™ on Stack Overflow

Check whether input checkbox is empty using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related