How do you find checkbox is checked or not in javascript?

Question

🏠 Go back to the homepage

Find out how to check the state of a checkbox, looking if it is checked or not, using JavaScript

Table of Contents Show

Find out how to check the state of a checkbox, looking if it is checked or not, using JavaScript
Check if a Single Check Box is Selected or not
Check if Multiple Checkboxes Are Selected or not
How do you find checkbox is checked or not?
How call a checkbox is checked in JavaScript?
How do you check if a checkbox is checked or not in TypeScript?
What is checkbox value if not checked?

Inspect the checked property of the element.

Say you have this checkbox:

<input type="checkbox" class="checkbox" />

You can see if it’s checked using

document.querySelector('.checkbox').checked

You can also check if looking for .checkbox:checked does not return null:

document.querySelector('.checkbox:checked') !== null

but I think looking for .checked is cleaner.

Do NOT use getAttribute() looking for the checked attribute value, because that’s always true if the checkbox is checked by default in this way:

<input type="checkbox" checked />

Also don’t check for the value of a checkbox element. It’s always on, regardless whether the checkbox is checked or not.

To check if a checkbox is checked in JavaScript, you can use the checked property of the HTML element. This property sets or returns the checked state of a checkbox.

Let us say that you have the following checkbox input field:

<input type="checkbox" id="checkbox">

You can use the following code to check if the checkbox is checked or not:

const elem = document.querySelector('#checkbox')
if (elem.checked) {
  console.log(`Checkbox is checked!`)
} else {
  console.log(`Checkbox is not checked.`)
}

We used the querySelector() method to retrieve the checkbox element from DOM using its ID attribute value. Next, we inspected the value of the checked property to decide whether the checkbox was checked or not.

The checked property can also be used to change the checked status of a checkbox programmatically using JavaScript, as shown below:

// Mark checkbox as checked
document.querySelector('#checkbox').checked = true

// Uncheck checkbox
document.querySelector('#checkbox').checked = false

If you are using jQuery, the is() function can also be used to check if a checkbox is checked or not:

if ($('#checkbox').is(':checked')) {
  console.log(`Checkbox is checked!`)
} else {
  console.log(`Checkbox is not checked.`)
}

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

In this tutorial, we will learn to check whether a checkbox is checked in JavaScript. The checkbox is the input type in the HTML, which works as the selection box. The radio buttons which belong to the same group allow users to select only one value. Still, the checkbox which belongs to the same group allows users to select multiple values.

Also, you have many uses of checkboxes in your mind yourself. The HTML can add a checkbox to the webpage, but to add the behaviour to the checkbox, we must use JavaScript. Programmers can add different behaviours to the checkbox based on whether the checkbox is checked or not.

Here, we will learn to check for the single and multiple checkboxes is selected or not.

Check if a Single Check Box is Selected or not

In this section, we will learn to check whether the checkbox is checked or not. In JavaScript, we can access the checkbox element using id, class, or tag name and apply ‘.checked’ to the element, which returns either true or false based on the checkbox is checked.

Syntax

Users can follow the below syntax to check single checkbox is selected or not.

let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // it returns Boolean value

Example

In the below example, we have created the checkbox. Also, we have added the event listener to the checkbox. When the user changes the checkbox's value, the event listener will be invoked. In the event listener, we will check for the checkbox is checked or not. If checkbox is checked, we will show some text to the div otherwise we will make the div empty.

<html>
<head>
   <title>Check whether the Checkbox is checked or not</title>
</head>
<body>
   <h2>Check whether the Checkbox is checked or not using <i> .checked attribute </i></h2>
   <h4>Check the below checkbox to see the text div</h4>
   <input type = "checkbox" id = "checkbox">
   <div id = "text"> </div>
   <script>
      let checkbox = document.getElementById("checkbox");
      checkbox.addEventListener( "change", () => {
         if ( checkbox.checked ) {
            text.innerHTML = " Check box is checked. ";
         } else {
            text.innerHTML = "";
         }
      });
   </script>
</body>
</html>

In the above output, users can see that when they check the checkbox, it shows a message “checkbox is checked.” When they uncheck the checkbox, it shows nothing.

Check if Multiple Checkboxes Are Selected or not

It is simple to add the behaviour to a single checkbox. On many websites, you have seen that when you see the popup to accept the terms & conditions, it has multiple checkboxes and when you select all checkboxes, only it enables the accept button.

Here, we will do the same thing. We will create the multiple checkbox and check for all checkbox whether it is checked or not and on the basis of that, we will enable the button.

Syntax

Access all the checkboxes and button

let checkbox = document.getElementsByName( "checkbox" );
let button = document.getElementById( "btn" );

Add event listener to every checkbox.

for ( let i = 0; i < checkbox.length; i++ ) {
   checkbox[i].addEventListener( "change", () => {
   });
}

Inside the event listener, check all the checkbox is checked or not.

button.disabled = false;
for ( let i = 0; i < checkbox.length; i++ ) {
   if ( checkbox[i].checked == false )

   // if any single checkbox is unchecked, disable the button.
   button.disabled = true;
}

Example

In the example below, we have created the three checkboxes with the same name, which means all belong to the same group. Also, we have created the button in HTML and the accessing button and checkbox using the id and name in JavaScript.

We have added an event listener in all checkboxes. When any checkbox value changes, it will check whether all checkbox is checked or not. If all checkbox is checked, the event listener enables the button. Otherwise, the button remains disabled.

<html>
<head>
</head>
<body>
   <h2>Check whether the Checkbox is checked or not</h2>
   <h4>Check the below all checkboxes to enable the submit button.</h4>
   <input type = "checkbox" name = "checkbox">
   <input type = "checkbox" name = "checkbox">
   <input type = "checkbox" name = "checkbox">
   <button id = "btn" disabled> enable button</button>
   <script>
 
      
      let checkbox = document.getElementsByName("checkbox");
      let button = document.getElementById("btn"); 
      Initialilly checkbox is disabled
      for (let i = 0; i < checkbox.length; i++) {
 
         
         checkbox[i].addEventListener( "change", () => {
            button.disabled = false;
 
            
            for (let i = 0; i < checkbox.length; i++) {
               if ( checkbox[i].checked == false )
               button.disabled = true;
            }
         });
      }
   </script>
</body>
</html>

In the above output, users can see that when they check all the checkboxes, button will be enable, otherwise button remains disabled.

In this tutorial, we have learned how we can check whether single or multiple checkboxes are selected or not. We have added the different behaviour to the web page according to the checkbox selection value.

Also, users can use the JavaScript libraries such as jQuery, so users need to make less effort to check for multiple checkboxes.

Updated on 08-Aug-2022 08:50:08

Related Questions & Answers
How to check whether a checkbox is checked with JavaScript?
How do I check whether a checkbox is checked in jQuery?
HTML DOM Input Checkbox checked Property
How to set “checked” for a checkbox with jQuery?
How to check whether a JavaScript date is valid?
How to check whether a value is a number in JavaScript?
How to check whether a Button is clicked with JavaScript?
How to check whether a number is finite or not in JavaScript?
How to check whether an array is a true array in JavaScript?
How to check whether a NaN is a NaN or not in JavaScript?
How can I check whether a variable is defined in JavaScript?
How to handle when checkbox 'checked state' changed event in jQuery?
How to check whether a value is a safe integer or not in JavaScript?
How to check whether a string contains a substring in JavaScript?
How to check whether a pandas DataFrame is empty?

How do you find checkbox is checked or not?

prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not. prop(): This method provides an simple way to track down the status of checkboxes. It works well in every condition because every checkbox has checked property which specifies its checked or unchecked status.

How call a checkbox is checked in JavaScript?

“javascript call function when checkbox is checked” Code Answer's.

//using plane javascript..

if(document. getElementById('on_or_off_checkbox'). checked) {.

//I am checked..

//using jQuery..

if($('#on_or_off_checkbox'). is(':checked')){.

//I am checked..

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.