Categories
Jquery

Select All checkboxes using jQuery

Here i am sharing a small jQuery function that toggles multiple select boxes. In our Applications/projects we will have list with a checkbox, to do action like Edit,delete. When user need to select all the list we have to provide a multiple check-boxes selection option, here is the simple code which will helps you in many projects.

Select All checkboxes using jQuery
Select All checkboxes using jQuery
Here is the example of multiple select box toggle with jQuery:
<!DOCTYPE html>
<html>
   <head>
      <title>Select All checkboxes using jQuery</title>
      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
      <style type="text/css">
         table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
         }
         td, th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
         }
         tr:nth-child(even) {
         background-color: #dddddd;
         }
      </style>
      <script type="text/javascript">
         $(document).ready(function() {
         $(".check-all").change(function(){
         if(this.checked){
         $(".check-box").each(function(){
         this.checked=true;
         })              
         }else{
         $(".check-box").each(function(){
         this.checked=false;
         })              
         }
         });
         $(".check-box").click(function (){
         if ($(this).is(":checked")){
         var isAllChecked = 0;
         $(".check-box").each(function(){
         if(!this.checked)
           isAllChecked = 1;
         })              
         if(isAllChecked == 0){ $(".check-all").prop("checked", true); }     
         }else {
         $(".check-all").prop("checked", false);
         }
         });
         });
      </script>
   </head>
   <body>
      <table style="width:100%">
         <tr>
            <th><input type="checkbox" name="checkedAll" class="check-all" />Check all</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
         </tr>
         <tr>
            <td><input type="checkbox" name="checkAll" class="check-box" /></td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="checkAll" class="check-box" /></td>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
         </tr>
         <tr>
            <td><input type="checkbox" name="checkAll" class="check-box" /></td>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
         </tr>
      </table>
   </body>
</html>

Leave a Reply

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