Select all checkbox using jquery

Today I will show a quick and easy method on how to make a select all checkbox to select all checkboxes real time using Jquery. It is very easy.

The HTML code is given below

<div class="row">
    <div class="col-md-3 "> 
        Select All : <input id="checkall" class='' type="checkbox" >
    </div>
   
    <div class="col-md-3" >
        Checkbox 1 :<input value="1" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>
    <div class="col-md-3" >
        Checkbox 2 :<input value="2" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>
    <div class="col-md-3" >
        Checkbox 3 :<input value="3" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>

</div>

The Jquery Code is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkall").click(function (){
     if ($("#checkall").is(':checked')){
        $(".checkboxes").each(function (){
           $(this).prop("checked", true);
           });
        }else{
           $(".checkboxes").each(function (){
                $(this).prop("checked", false);
           });
        }
 });
});
</script>

Here the jquery function first check whether id named checkall is checked or not if checked it will iterate all checkboxes with under the class checkboxes using each function in jquery. At each iteration the checkbox is checked using prop function which set the property of checkbox to true.