Javatpoint Logo
Javatpoint Logo

Checkbox validation in jQuery

In this article, we will learn how to validate checkbox using jQuery. For this, we are using two methods of jQuery.

  • .prop method
  • .is method

Both methods are used to validate a checkbox in jQuery.

First of all, we are going to learn some basics of jQuery and checkbox elements. Further, we can explain this concept with various examples using both methods.

What do you mean by checkbox?

A checkbox is used to display small squares that offer the user a number of choices that can be toggled "on" and "off." A tick is displayed if the choices are selected; otherwise, the square box remains empty. There can be a number of checkboxes in a form, and each works independently from the others. It is used when a visitor is asked a question that can have more than one right answers.

A <input> tag with attribute type set to "checkbox" is used to create a checkbox.

Syntax:

The attributes that can be specified for a checkbox are:

  • Name: this attribute of the checkbox is used to specify a name for the checkbox.
  • Value: This attribute of the checkbox is used to provide a value for each checkbox. This value will be sent if the checkbox is selected.
  • Checked: this attribute of the checkbox is used to select the default value of the checkbox.

Example:

In this example, we can create various options of the hobby in a form. The visitor can have one or more options for a select a hobby such as singing, dancing, and reading. By Default, the reading option is checked because we have set this attribute checked.

Checkbox validation in jQuery

JQuery is a fast, lightweight, and feature-rich JavaScript library.

With the use of jQuery, we can validate the checkbox. We are using two methods of jQuery to validate a <input type ="checkbox">. These methods are:

  • By using the jQuery prop () method
  • By using the jQuery is () method

By using the jQuery prop () method

The jQuery prop () method provides a simple, effective, and reliable way to track down the current status of a checkbox. It works pretty well in all conditions because every checkbox has a checked property that specifies its checked or unchecked status.

Syntax of prop () method:

In above syntax, selector can be any <input> element such as checkbox, prop is a method for checking the value of <input> and parameter defines the present value of the input state.

Let us take some example using jQuery prop () Method

Example 1:

Explanation:

In this example we are using prop method of jQuery to validate a checkbox is checked or not.

This code of jQuery is used for validate a checkbox.

Output:

In the above example, if we select the value of the checkbox, then we register the form; otherwise, the form is not registered.

Checkbox validation in jQuery

Following is the output shown if the checkbox is not selected.

Checkbox validation in jQuery

The above output says we must agree with the terms and conditions for register the form.

By using the jQuery is () Method

This method of jQuery is very simple and easy to use. By using this method, we can easily find whether a checkbox is checked or not.

Syntax of is () method:

In above syntax, selector can be any <input> element such as checkbox, is() method is used for checking the value of <input> and parameter defines the present value of the input state.

Let us take some example using jQuery is () Method

Example 1:

Explanation:

In this example, we are using is() method of jQuery to validate a checkbox is checked or not.

This code of jQuery is used to validate a checkbox.

Output:

Checkbox validation in jQuery

In the above example, if we select the value of the checkbox, then we can subscribe to the form. Otherwise, the form is not subscribed.

Following is the output shown if the checkbox is not selected.

Checkbox validation in jQuery

The above output says we must agree with the terms and conditions for subscribing the form.

Example 2:

Explanation:

In this example, we are using is() method of jQuery to validate if a checkbox is checked or not. If the checkbox is checked, then the alert message with your agreed conditions is displayed, and if the checkbox is not checked, then the alert message with please check terms & conditions is displayed.

This code of jQuery is used to check the status of the checkbox.

Output:

The following output is shown if we select the checkbox.

Checkbox validation in jQuery

The following output is shown if we do not select the checkbox.

Checkbox validation in jQuery




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA