In this article, we will see how to validate multiple checkboxes in jquery. Here, we will learn how to check whether at least one checkbox is checked or not using jquery or javascript.
On the website sometimes we required different kinds of validation in the form like radio button validation, dropdown option validation, input fields validation and etc.
In jquery, we will get the multiple check length and check the list checked checkbox and display the required validation message. Also, we will use the filter function for checkbox checking.
So, let's see jquery multiple checkboxes required validation, how to validate checkbox in javascript, and how to select at least one checkbox in jquery.
Example:
In this example, we will create language and check the array length and validate whether the checkbox is checked or not and display an error message using jquery.
<!DOCTYPE html>
<html>
<head>
<title>How To Validate Multiple Checkbox In jQuery - Techsolutionstuff</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
margin:100px;
}
.note{
color:red;
display:none;
}
</style>
</head>
<body>
<div>
<h3>How To Validate Multiple Checkbox In jQuery - Techsolutionstuff</h3>
<strong>Language:</strong>
<input type="checkbox" value="true" class="language" name="language[]"> Laravel
<input type="checkbox" value="true" class="language" name="language[]"> PHP
<input type="checkbox" value="true" class="language" name="language[]"> jQuery
<input type="checkbox" value="true" class="language" name="language[]"> Python
<input type="checkbox" value="true" class="language" name="language[]"> React JS
<p class="note">Please check at least one checkbox</p>
<br>
<button class="submit">Submit</button>
</div>
<script type="text/javascript">
$(".submit").click(function(){
if ($('.language').filter(':checked').length < 1){
$(".note").show();
return false;
}else{
$(".note").hide();
}
});
</script>
</body>
</html>
Output:
You might also like :
Top comments (0)