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 for check uncheck all checkboxes with AngularJS.

Check uncheck all multiple checkboxes with AngularJS


Contents

  1. Include script
  2. Example 1
  3. Example 2
  4. Example 3
  5. 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" directive.

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" ng-model="user.checked" /> {{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;
   });
  };
 }]);

 </script>
</body>

Output

Check uncheck the first checkbox.

 


 

5. Conclusion

This allows the user to check/uncheck all checkboxes on the 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 the link.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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