May 11, 2024 | HTML
Hello Dev,
At times, there arises a requirement to select and deselect all checkboxes, similar to the functionality seen in Gmail where checking the top checkbox automatically selects all others. This can be achieved using jQuery and its `prop()` method. In the following example, you can observe how this is implemented. You can utilize this example easily.
To implement a feature similar to Gmail's checkbox selection behavior, where checking one checkbox selects all others, you can use jQuery's prop() method to toggle the checked state of all checkboxes. Here's a simple example demonstrating how to achieve this:
Read Also: How to Set Scroll to Bottom in Jquery? index.php
<html lang="en">
<head>
<title>Select Deselect All Checkboxes Using Jquery Example Tutorial -- ItErrorSolution.com</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>Select Deselect All Checkboxes Using Jquery Example Tutorial -- ItErrorSolution.com</h1>
<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>
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"