Check uncheck all Multiple Checkboxes with AngularJS

The check uncheck all functionality mainly required when the long list of records available on the page and allowing the user to select multiple records to perform an action.

For example – Delete the selected user’s list, in this case, if require deleting all users then it needs to select one by one.

This can also be used on the limited number of list items.

I show you some of the examples of check uncheck all checkboxes with AngularJS.

Check uncheck all multiple checkboxes with AngularJS

Download

Include script
Example 1
Example 2
Example 3
Conclusion

1. Include script

You can either download and include angular.min.js in the page or use CDN.

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js'></script>

2. Example 1

In this example, I have created multiple checkbox elements.

The first checkbox element is for check/uncheck all other checkboxes for this define ng-model='checkall' directive.
On remaining checkboxes add ng-checked="checkall" directive.
In the script defined module variable and controller.

Completed Code

<body ng-app="myapp">
 <div ng-controller="checkCtrl">
 
  <input type='checkbox' value='' ng-model='checkall' >Check/Uncheck All<br/>
  <input type='checkbox' ng-checked="checkall" >Check1<br/>
  <input type='checkbox' ng-checked="checkall">Check2<br/>
  <input type='checkbox' ng-checked="checkall">Check3<br/>
  <input type='checkbox' ng-checked="checkall" >Check4<br/>

 </div>
 
 <script>
 var checkboxManipulate = angular.module('myapp', []);
 
 checkboxManipulate.controller('checkCtrl', ['$scope', '$http', function ($scope, $http) {
 
 }]);

 </script>
</body>

Output

Check uncheck the first checkbox.

3. Example 2

Take the above example, only using the buttons instead of a checkbox to check/uncheck all the checkboxes elements.

Define ng-click directive on the button.
On button click update $scope.checkall value.

Completed Code

<body ng-app="myapp">
 <div ng-controller="checkCtrl">
 
  <input type='button' id='but_checkall' value='Check all' ng-click='checkAll()'>&nbsp;<input type='button' id='but_uncheckall' value='Uncheck all' ng-click='uncheckAll()'><br/>
  <input type='checkbox' ng-checked="checkall" >Check2<br/>
  <input type='checkbox' ng-checked="checkall">Check3<br/>
  <input type='checkbox' ng-checked="checkall">Check4<br/>
  <input type='checkbox' ng-checked="checkall" >Check5<br/>

 </div>
 
 <script>
 var checkboxManipulate = angular.module('myapp', []);
 
 checkboxManipulate.controller('checkCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.checkAll = function(){
   $scope.checkall = true;
  }

  $scope.uncheckAll = function(){
   $scope.checkall = false;
  }
 }]);

 </script>
</body>

Output

Click the buttons to check uncheck all.

4. Example 3

Here is another example, where I created a single checkbox for check uncheck which has ng=model="checkall" ng-click="checkUncheckAll()" directives.

Using ng-repeat directive to create other checkbox elements and define ng-model="user.checked" and ng-change='updateCheckall()' to change the checkall checkbox checked state when all checkboxes are checked or one of the checkbox is unchecked.

On the first checkbox click changes $scope.checkall value and update all other checkboxes user.checked=$scope=checkall.

Completed code

<body ng-app="myapp">
 <div ng-controller="checkCtrl">
 
  <ul >
   <li>
    <input type="checkbox" ng-model="checkall" ng-click="checkUncheckAll()" /> Check All
   </li>
   <li ng-repeat="user in users">
    <input type="checkbox" value="{{ user.name }}" ng-model="user.checked" ng-change='updateCheckall()' /> {{user.name}} 
   </li> 
  </ul>
 </div>
 
 <script>
 var checkboxManipulate = angular.module('myapp', []);
 
 checkboxManipulate.controller('checkCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.users = [
   { name: "Yogesh singh"}, 
   { name: "Sonarika Bhadoria" }, 
   { name: "Vishal Sahu" }, 
   { name: "Anil singh" }
  ];
  $scope.checkUncheckAll = function () {
   if ($scope.checkall) {
    $scope.checkall = true;
   } else {
    $scope.checkall = false;
   }
   angular.forEach($scope.users, function (user) {
    user.checked = $scope.checkall;
   });
  };

  $scope.updateCheckall = function($index,user){
           
    var userTotal = $scope.users.length;
    var count = 0;
    angular.forEach($scope.users, function (item) {
       if(item.checked){
         count++;
       }
    });

    if(userTotal == count){
       $scope.checkall = true;
    }else{
       $scope.checkall = false;
    }
  };
 }]);

 </script>
</body>

Output

Check uncheck the first checkbox.

5. Conclusion

This allows the user to check/uncheck all checkboxes on a single click instead of doing one by one.

You can use any of the above ways which fit your requirement.

If you want to learn how to do this with jQuery then follow this tutorial.

If you found this tutorial helpful then don't forget to share.

Contents

1. Include script

2. Example 1

3. Example 2

4. Example 3

5. Conclusion