How to check if Checkbox is Checked or not using JavaScript

You can use simple JavaScript methods to check if a checkbox or multiple checkboxes on a webpage are checked or not. There’s no need to use any library like jQuery etc. for this purpose. In-fact the method that I am showing you here can also be used on dynamically created checkboxes.

See this demo

Example 1

In the first example, I am using checkboxes that I have added at design time. The checkboxes are inside a <div> element. Using a simple script, I’ll check if a checkbox is checked or not.

<!DOCTYPE html>
<html>
<body>
    <p>Select one or more checkboxes and click the button!</p>

    <div id="birds">
        <input type="checkbox" id="brd1" value="Mourning Dove" />
        <label for="brd1">Mourning Dove</label>
        <br />
        <input type="checkbox" id="brd2" value="Rock Pigeon" />
        <label for="brd2">Rock Pigeon</label>
        <br />
        <input type="checkbox" id="brd3" value="Black Vulture" />
        <label for="brd3">Black Vulture</label>
    </div>
    <p>
        <input type="button" id="check" onclick="nowCheck()" value="Click it" />
    </p>
</body>
<script>
    function nowCheck() {
        // Get all the child elements inside the DIV.
        var cont = document.getElementById('birds').children;  

        for (var i = 0; i < cont.length; i++) {
            // Check if the element is a checkbox.
            if (cont[i].tagName == 'INPUT' && cont[i].type == 'checkbox') {
                // Finally, check if the checkbox is checked.
                if (cont[i].checked) {
                    alert(cont[i].value + ' is checked!');
                }
            }
        }
    }
</script>
</html>

Try it

Simple isn't? What this is doing? First, it will getting all the child elements inside a <div> element and check if any child element is a checkbox. I am running a for loop to check the type of elements that I have inside the <div>.

Next, using the .checked property, I am checking if the checkbox is checked or not.

if (cont[i].checked) { }

The property .checked returns a Boolean value (true or false). So, if a checkbox is checked, the property returns true, or else its false.

Example 2

The same above procedure (or method) can be used to check dynamically created checkboxes.

You can easily create checkboxes dynamically in JavaScript and it to a web page. These checkboxes too need to be checked, in some cases.

Here’s how you can do this.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Enter a Value <input type="text" id="tb" autofocus />
    <input type="button" id="bt" value="Create Checkbox" onclick="createChk(tb)" />
    <p id="container"></p>

    <p>
        <input type="button" id="check" onclick="nowCheck()" value="Click it validate!" />
    </p>
</body>
<script>
    function nowCheck() {
        // Get all the child elements inside the container.
        var cont = document.getElementById('container').children;

        for (var i = 0; i < cont.length; i++) {
            // Check if the element is a checkbox.
            if (cont[i].tagName == 'INPUT' && cont[i].type == 'checkbox') {     
                // Finally, check if the checkbox is checked.
                if (cont[i].checked) {      
                    alert(cont[i].value + ' is checked!');
                }
            }
        }
    }

    // Create and add checkboxes to your webpage.
    var i = 1;
    function createChk(obj) {
        if (obj.value !== '') {

            var chk = document.createElement('input');
            chk.setAttribute('type', 'checkbox');       // Type of element.
            chk.setAttribute('id', 'chk' + i);     // Set element id.
            chk.setAttribute('value', obj.value);

            var lbl = document.createElement('label');
            lbl.setAttribute('for', 'chk' + i);

            // Create a text box and append it to the label.
            lbl.appendChild(document.createTextNode(obj.value));

            // Append the newly created checkbox and label to <p> element.
            container.appendChild(chk);
            container.appendChild(lbl);

            obj.value = '';
            document.getElementById(obj.id).focus();

            i = i + 1;
        }
    }
</script>
</html>

Try it

Now, you can validate your checkboxes easily at the client side using the above methods. However, never forget to validate form data at the server side also. Hope this helps

← PreviousNext →