Hello dev, Today we are going to learn How to Check and Uncheck checkboxes using JQuery. This tutorial will cover on how to check and uncheck checkbox using jQuery.
Sometimes we need to Select and Deselect all checkboxes like you see on Gmail if you check top checkbox then automatically select other all. So, we can do using jQuery and its method prop().In Following example you can see how is that and use this example simply:
Also Read: Laravel Mail Send with PDF Attachment Example
Example on Check and Uncheck checkboxes using JQuery:
<html lang="en">
<head>
<title>Select and Deselect Checkbox - LaravelTuts.com</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input name="subject_all" class="subject-all" type="checkbox">Select All<br/>
<input value="1" name="subject" class="subject-list" type="checkbox">Subject 1
<input value="2" name="subject" class="subject-list" type="checkbox">Subject 2
<input value="3" name="subject" class="subject-list" type="checkbox">Subject 3
<input value="4" name="subject" class="subject-list" type="checkbox">Subject 4
<input value="5" name="subject" class="subject-list" type="checkbox">Subject 5
<script type="text/javascript">
$('.subject-all').on('change', function() {
if(this.checked){
$('.subject-list').prop('checked', true);
}else{
$('.subject-list').prop('checked', false);
}
});
</script>
</body>
</html>Conclusion
Today, We had learn Check and Uncheck checkboxes using JQuery. Hope this tutorial helped you with learning HTML and JQuery Language. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
Also Read: Angular 10 Multiple File Upload Example