Check if checkbox is checked javascript

Question

You can check if checkbox is checked or not in Javascript by using the checked property of the checkbox.

Table of Contents Show

How do you check if a checkbox is checked JavaScript?
How check if checkbox is checked Div?
How do you check if a checkbox is checked or not in TypeScript?
How check multiple checkbox is checked or not in JavaScript?

Start by creating a checkbox element in HTML.

<label for="legal-terms">
  <input type="checkbox" id="legal-terms" />
  I agree with the terms and conditions
</label>

In Javascript you can check the state of the checkbox using: document.querySelector('#legal-terms').checked or document.querySelector('#legal-terms:checked') !== null

The checked property is a boolean that is either true or false.

Example 1

document.querySelector('#legal-terms').addEventListener('click', (event) =>{
  if(event.target.checked){
    console.log("The checkbox has been checked");
  }  
})

Result

If you check the browser console, you will see that the checkbox fires only when the checkbox is checked.

Example 2

document.getElementById('legal-terms').addEventListener('click', (event) =>{
  if(event.target.checked){
    console.log(event.target.checked)
  } else{
    console.log(event.target.checked)
  }
})

Result

If checkbox is checked, the checkbox checked value is true. When checkbox is unchecked, the checked value turns to false.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

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() {
        
        var cont = document.getElementById('birds').children;  

        for (var i = 0; i < cont.length; i++) {
            
            if (cont[i].tagName == 'INPUT' && cont[i].type == 'checkbox') {
                
                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() {
        
        var cont = document.getElementById('container').children;

        for (var i = 0; i < cont.length; i++) {
            
            if (cont[i].tagName == 'INPUT' && cont[i].type == 'checkbox') {     
                
                if (cont[i].checked) {      
                    alert(cont[i].value + ' is checked!');
                }
            }
        }
    }

    
    var i = 1;
    function createChk(obj) {
        if (obj.value !== '') {

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

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

            
            lbl.appendChild(document.createTextNode(obj.value));

            
            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

Well, that’s it. Thanks for reading. ☺

← PreviousNext →

How do you check if a checkbox is checked JavaScript?

Checking if a checkbox is checked 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.

How check if checkbox is checked Div?

Approach:.

Selector name for checkbox is same as the element which is used to display the. content..

CSS display property of each element is set to none using display: none; for hiding the element initially..

Use . toggle() method for displaying and hiding the element for checking and unchecking the box..

How do you check if a checkbox is checked or not in TypeScript?

To check if a checkbox element is checked in TypeScript: Type the element as HTMLInputElement using a type assertion. Use the checked property to see if the element is checked. The property will return true if it is checked and false otherwise.