Jquery Check or Uncheck all Checkboxes with Same Input Name

In this Post helps you to built check or uncheck all checkbox using Jquery Event.

First Step you need to include following Jquery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Next Step create respective check boxes and assign Jquery Events

<!DOCTYPE html>
<html>
   <head>
      <title>Check / Uncheck All Checkbox using Jquery</title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <table style="background-color:#3cbc8d; width:400px; color:#FFF;" border="1" >
         <tr>
            <th width="75%">Foot Items</th>
            <th width="25%">Select All
               <input type="checkbox" id="selectallitems">
            </th>
         </tr>
         <tr>
            <td>Idly</td>
            <td align="center"><input type="checkbox" value="1" class="footitems" name="footitems[]"></td>
         </tr>
         <tr>
            <td>Parotta</td>
            <td align="center"><input type="checkbox" value="2" class="footitems" name="footitems[]"></td>
         </tr>
         <tr>
            <td>Dosai</td>
            <td align="center"><input type="checkbox" value="3" class="footitems" name="footitems[]"></td>
         </tr>
         <tr>
            <td>Uppuma</td>
            <td align="center"><input type="checkbox" value="4" class="footitems" name="footitems[]"></td>
         </tr>
      </table>
      <script type="text/javascript">
         $(document).ready(function(){
         $('#selectallitems').on('click',function(){
         if(this.checked){
         $('.footitems').each(function(){
         this.checked = true;
         });
         }else{
         $('.footitems').each(function(){
         this.checked = false;
         });
         }
         });
         $('.footitems').on('click',function(){
         if($('.footitems:checked').length == $('.footitems').length){
         $('#selectallitems').prop('checked',true);
         }else{
         $('#selectallitems').prop('checked',false);
         }
         });
         });
      </script>
   </body>
</html>

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *