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:

  <input type =”checkbox” name =”checkbox name” value =”choice-id” checked>  

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:

  <input type =”checkbox” value = “singing”>  <input type =”checkbox” value = “dancing”>  <input type =”checkbox” value = “reading” checked>  

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:

  <! DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Checkbox validation using prop method in jQuery  </title>  <script src=”https://code.jquery.com/jquery-3.5.1.min.js”>  </script>  <script>  $(document).ready (function () {  my_function_terms=function my_function_terms(status,str){  if (status==’NOTOK’){  $(‘#terms1’).css (  {  “border-color”: “red”,  “border-width”:”1px”,  “border-style”:”solid”  }  );  }  else  {  $(‘#terms1’).css (  {  ‘border-color’: ”,”border-width”:”0px”  }  );  }  $(‘#msg_terms’).html (str);  }  ///////  ///////// Terms & conditions //////////  $(“#terms”).change (function ()  {  var ckb_status = $(“#terms”).prop(‘checked’);  if(ckb_status)  {  my_function_terms (“OK”,” Thanks for Registration………..”);  }  else  {  my_function_terms(“NOTOK”,”You must agree to terms and conditions before submit the form”);  }  }  );  $(“#b1”).click (function (event)  {  var ckb_status = $(“#terms”).prop(‘checked’);  if (ckb_status)  {  my_function_terms(“OK”,”Thanks .. “);  }  else  {  my_function_terms(“NOTOK”, “please agree the terms and conditions before submit the form”);  }  })  })  </script>  <style>  h1 {  color: green;  }  h5 {  color: green;  }  h2 {  color: green;  }  p {  color: red;  }  b {  color: blue;  font-size: 38px;  }  body{  background-color: pink;  </style>  </head>  <body>  <table class=’table’ align=”center” >  <caption >  <h2> Registration Form </h2> </caption> <br> <br>  <tr>  <td >  <label> Enter Your Name : </label>  <input type=”textbox” value=”” name=’name1′> <br> <br>  </td>  </tr>  <tr>  <td >  <label> Enter Your Email: </label>  <input type=”email” value=”” name=’name2′> <br> <br>  </td>  </tr>  <tr>  <td >  <label> Enter Your Password: </label>  <input type=”password” value=”” name=’name3′> <br> <br>  </td>  </tr>  <tr>  <td >  <span class=’form-group’ id=terms1>  <input type=checkbox value=yes name=’terms1′ id=’terms’>  I Agree to <a href=’#’ >Terms & Conditions </a>  </span>  </td>  <td>  <div id=msg_terms name=msg_terms>  </div>  </td>  </tr>  <tr>  <td colspan=2>  <input type=button id=b1 class=b1 value=’Register’>  </td>  </tr>  </table>  </body>  </html>  

Explanation:

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

  <script>  $(document).ready (function () {  my_function_terms=function my_function_terms(status,str){  if (status==’NOTOK’){  $(‘#terms1’).css (  {  “border-color”: “red”,  “border-width”:”1px”,  “border-style”:”solid”  }  );  }  else  {  $(‘#terms1’).css (  {  ‘border-color’: ”,”border-width”:”0px”  }  );  }  $(‘#msg_terms’).html (str);  }  ///////  ///////// Terms & conditions //////////  $(“#terms”).change (function ()  {  var ckb_status = $(“#terms”).prop(‘checked’);  if(ckb_status)  {  my_function_terms (“OK”,” Thanks ……..”);  }  else  {  my_function_terms(“NOTOK”,”please agree the terms and conditions before submit the form”);  }  }  );  //////// End of terms and condtions //////  $(“#b1”).click (function (event)  {  var ckb_status = $(“#terms”).prop(‘checked’);  if (ckb_status)  {  my_function_terms(“OK”,”Thanks .. “);  }  else  {  my_function_terms(“NOTOK”, “You must agree to terms and conditions before submit the form”);  }  })  })  </script>  

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.

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

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:

  <! DOCTYPE html>  <html lang=”en”>  <head>  <meta charset=”utf-8″>  <title>  Checkbox validation using is method in jQuery  </title>  <style>  #result  {  background: green;  font-size: 30px;  }  p {  font-size: 20px;  }  b {  font-size: 30px;  color: green;  }  body {  background-color: pink;  }  </style>  <script src=”https://code.jquery.com/jquery-3.5.1.min.js”>  </script>  <script>  $(document).ready (function ()  {  $(‘input [type=”checkbox”]’).click (function ()  {  if ($(this).is(“:checked”))  {  $(“#result”).html (“Thanks for subscribe the form”);  }  else if($(this).is(“:not(:checked)”))  {  $(“#result”).html (“please follow the terms and conditions.”);  }  });  });  </script>  </head>  <body>  <form align=”center”>  <fieldset>  <legend> <b> Subscribe Form </b> </legend>  <label> Enter Your Name : </label>  <input type=”textbox” value=”” name=’name1′> <br> <br>  <label> Enter Your Email: </label>  <input type=”email” value=”” name=’name2′> <br> <br>  <label> Enter Your Password: </label>  <input type=”password” value=”” name=’name3′> <br> <br>  <p><input type=”checkbox”> I agree the terms & conditions </p>  <div id=”result”> </div>  </field set>  </table>  </form>  </body>  </html>  

Explanation:

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

  <script>  $(document).ready (function ()  {  $(‘input [type=”checkbox”]’).click (function ()  {  if ($(this).is(“:checked”))  {  $(“#result”).html (“Thanks for subscribe the form”);  }  else if($(this).is(“:not(:checked)”))  {  $(“#result”).html (“please follow the terms and conditions.”);  }  });  });  </script>  

This code of jQuery is used to validate a checkbox.

Output:

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.

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

Example 2:

  <! DOCTYPE html>  <html>  <head>  <title>  JQuery Validate Terms & Conditions Checkbox  </title>  <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.js”>  </script>  <script type=”text/javascript”>  $(function () {  $(‘#btncheck’).click (function () {  if ($(‘#chkterms’).is(‘:checked’)) {  alert (‘you agreed conditions’)  }  else {  alert (‘please check terms & conditions’)  }  })  })  </script>  <style>  b {  color: blue;  font-size: 38px;  }  body {  background-color: pink;  }  div {  margin-top: 30px;  }  </style>  </head>  <body>  <form id=”form1″ >  <div align=”center”>  Check Status:  <input type=”checkbox” id=”chkterms” /> <br> <br>  Terms & Conditions  <input type=”button” id=”btncheck” value=”Check” />  </div>  </form>  </body>  </html>  

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.

  <script type=”text/javascript”>  $(function () {  $(‘#btncheck’).click (function () {  if ($(‘#chkterms’).is(‘:checked’)) {  alert (‘you agreed conditions’)  }  else {  alert (‘please check terms & conditions’)  }  })  })  </script>  

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

Output:

The following output is shown if we select the checkbox.

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

Next TopicUse of moment JS to change date format in jquery

Checkbox validation in jQuery

Checkbox validation in jQuery

What do you mean by checkbox?

Checkbox validation in jQuery

By using the jQuery prop () method

By using the jQuery is () Method

Architecture of Joomla

jQuery children() method

You may also like