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

  1. Using jQuery prop() method.
  2. Using jQuery is() method.

Both methods are used to validate a checkbox in jQuery, let’s check below:

Syntax of Checkbox:

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

By using the jQuery prop() method

The jQuery prop() method provides a simple, effective, and reliable way to check the current state of a checkbox. Each checkbox has a checked property that indicates its checked or unchecked status, so it works very well under all conditions. In the above syntax, the selector can be any element.

$(selector).prop (parameter)

Checkbox, Prop is the method to check the value, Parameter defines the current value of the input state.

Example:

<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>  
<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>

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:

$(selector).is (parameter)

In the above syntax, the selector can be any element, such as: For example, checkboxes. The is() method is used to check the value, and the parameters define the current value of the input state.

<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>  
Checkbox validation using is method in jQuery  
</title>  
<style>  
#result  
{  
background: green;  
font-size: 40px;  
}  
p {  
font-size: 30px;  
}  
b {  
font-size: 20px;  
color: green;  
}  
body {  
background-color: red;  
}  
</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>  

<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>

More on jQuery:

Leave a Reply

Your email address will not be published. Required fields are marked *

Explore More

How to Center a Popup Window on Screen

JavaScript window.open() method is used to open a popup window. This popup window will be placed in the center of the screen. This example creates the pop-up window without placing it into

Read More

How to hide URL in the popup window opened using window.open

If you are using below code to open a popup window in your web page, then address must be appearing in you pop up window and f you want to

Read More

window.showModalDialog is deprecated in Edge and Chrome

If you have a website being compatible with Edge/Chrome and in past it was only compatible with IE 11 and if you are using window.showModalDailog in your JavaScript code, then

Read More