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.

  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 *