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.

 $("#checkall").click(function (){
     if ($("#checkall").is(':checked')){
        $(".checkboxes").each(function (){
           $(this).prop("checked", true);
           });
        }else{
           $(".checkboxes").each(function (){
                $(this).prop("checked", false);
           });
        }
 });

      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.

 


Similar Posts

Web development
24th Feb 2019 07:04:10 PM
Javascript jQuery Bootstrap HTML & CSS
3222

ShareurCodes

ShareurCodes is a code sharing site for programmers to learn, share their knowledge with younger generation.