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:

Explore More

Open a Fixed-Size Popup Without Minimize/Maximize Effects

Disabling the minimize and maximize buttons of a popup window is not directly supported in modern browsers, including Microsoft Edge, due to security and user-experience considerations. The window.open() function provides

Read More

addchild and removeChild DOM methods for Edge and Chrome

Below we are creating a JavaScript utility that fully supports the functionality of the DOM (like appendChild, removeChild, etc.) in Microsoft Edge and other modern browsers involves wrapping standard DOM

Read More

On click of parent page pop up window should stay on top only

To ensure the popup window stays on top of the parent page, you can use the window.open() method with specific focus-handling logic. JavaScript allows you to bring the popup window

Read More