How to know if checkbox is checked by jQuery/JavaScript?

The checked state of a checkbox

In your web projects, you may require using the checkbox state of a checkbox for hiding or displaying a certain section in a form or other content of the web page or doing some other action.

For example, enabling a “Submit/Next” button as “Agree with T &Cs” checkbox is clicked and disabling that button if that checkbox is unchecked to not allow users proceeding to create an account.

Similarly, you may associate a textarea with a checkbox checked state if a user ticks it to enter the feedback.

In this tutorial, I am going to show how you may get the checkbox checked or unchecked state and perform the certain action based on this using jQuery / JavaScript.

An example of displaying a div if checkbox is checked

In this example, a checkbox is created with the checked status initially. If it is checked, the div tag with dummy text will display. If you uncheck this, the div will disappear. First, have a look at the demo and I will explain how it is done:

checkbox checked

See online demo and code

The complete code of demo:

 

You saw, the click event of the checkbox is used while the jQuery toggle method hidden or displayed the div element. Is not that simple as using the jQuery? See another way of using the jQuery below.

A demo of showing/hiding a form with checkbox state

In this example, the change event of the checkbox is used in the jQuery code. As the checkbox is checked or unchecked, it will execute the code inside it.

For the demo, I am hiding a div element that contains a form which is developed by using the Bootstrap built-in classes. So a reference to the jQuery along with the Bootstrap CSS is also included in the <head> section.

Tick or uncheck the checkbox for hiding or displaying the form. The $.show and $.hide methods of jQuery are used to display and hide the div element, have a look:

query checkbox checked

See online demo and code

The complete code:

 

In the demo page, look at the jQuery code where checkbox’s checked and unchecked state is handled and the if condition is used to show / hide the form.

A demo of checkbox with JavaScript

If you do not want using the jQuery for managing checkbox status and performing a certain action based on it then you may use a JavaScript based solution as well.

In this example, the getElementById javaScript property is used for getting the status of the checkbox. If this is checked, the button will display otherwise it will hide.

javascript checkbox checked

See online demo and code

The code:

 

You can see the JS code above the </body> tag for checking the status of checkbox and showing/hiding the button.

You may use links, buttons, paragraphs, div or other elements there.

Using $.on method of jQuery to work with checkbox status demo

In above example, the $.click event is used directly. You may also use the $.on method with click event for managing checked or unchecked state of the checkbox.

See this demo where I have used an HTML table that will hide upon unchecking the checkbox and will display as you tick the checkbox. Again, the toggle method is used, so if the table is visible, it will hide and vice versa:

jquery checkbox table

See online demo and code

The complete code including the markup, jQuery, and CSS:

 

You can see, the result is the same as in the first example.