If you required to validate the checkbox selection before submitting the form on submit button. Then this tutorial will help you to make alert popup if checkbox is not selected after submit button pressed.
See the following line of code and place this code before the </head> tag of your html web page.
// you must include this line and if you want to add the path from local then change path to local directory.
<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script>
Next step you need to add the following CSS code before the closing tag of the HTML page.
<style> body{ font-family:Verdana, Geneva, sans-serif} </style>
Next step is to add the following code of form in the body tag. It must be required the function call onsubmit event and also required the chk1 id of the checkbox input. you can give any name but you should use that name in the jquery while accessing the checkbox.
<div style=”width:450px;height:200px;margin:auto;padding:50px;border:solid 1px #999;”>
<form onsubmit=”return checkValidation(this);”>
<h2>Checkbox Validation In Jquery</h2>
<p><input type=”checkbox” id=”chk1″ value=”Select Me”> Select Me</p>
<p><input type=”submit” value=”Submit”></p>
</form>
</div>
Next step, add the final javascript code before the end of body tag.
<script type=”text/javascript” language=”JavaScript”>
function checkValidation()
{
if (jQuery(“#chk1”).prop(“checked”))
{
alert(“Select Me checkbox is checked”);}
else
alert(“no checkbox is checked”);
return false;
}
</script>
If you want to display message on the below the submit button instead of alert then you can add the any div label and set the value of that div on each condition using the val property of the jquery.
I know checkbox is the important element of the web page. people who are interesting to learn or get information about to get selected value of chekcbox using Jquery then you don;t miss the my other good and complete tutorial of How to get selected value of checkbox in Jquery?
