Check and uncheck all checkbox using Angularjs

By Hardik Savani | November 17, 2018 | | 16705 Viewer | Category : AngularJS


In this post, i would like to show you how to check uncheck checkboxes in angularjs. we mostly require to do check unselect all checkbox when we are doing multiple select items, multiple delete item etc task on your web app.

Here, i will show you two way to make all checkbox checked and unchecked on button click event in angular js. i also give you demo. so you can check also there. we will use ng-model and ng-checked for doing simple check uncheck toggle event. in another example we will use ng-checked and ng-click. So let's see both example.

Example 1:

<!doctype html>
<html>
<head>
  <title>Check and uncheck all checkbox using Angularjs - ItSolutionStuff.com</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
  
<body ng-app='myapp'>
  
  <div ng-controller="myCtrl">
    <input type='checkbox' value='' ng-model='checkAll' >Check/Uncheck All<br/>
    <input type='checkbox' ng-checked="checkAll" >AngularJS<br/>
    <input type='checkbox' ng-checked="checkAll">VueJS<br/>
    <input type='checkbox' ng-checked="checkAll">JQuery<br/>
    <input type='checkbox' ng-checked="checkAll" >PHP<br/>
  </div>
  
</body>
  
<script type="text/javascript">
  
   var app = angular.module('myapp', []);
  
   app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
   }]);
  
</script>
</html>

Example 2:

Read Also: AngularJS Check Checkbox is checked or not
<!doctype html>
<html>
<head>
  <title>Check and uncheck all checkbox using Angularjs - ItSolutionStuff.com</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
  
<body ng-app='myapp'>
  <div ng-controller="myCtrl">
    
    <input type='button' id='but_checkall' value='Check all' ng-click='checkAll()'>
    <input type='button' id='but_uncheckall' value='Uncheck all' ng-click='uncheckAll()'>
    <br/>
  
    <input type='checkbox' ng-checked="checkall" >AngularJS<br/>
    <input type='checkbox' ng-checked="checkall">VueJS<br/>
    <input type='checkbox' ng-checked="checkall">JQuery<br/>
    <input type='checkbox' ng-checked="checkall" >Laravel<br/>
  
  </div>
</body>
  
<script type="text/javascript">
  
   var app = angular.module('myapp', []);
  
   app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
   
    $scope.checkAll = function(){
     $scope.checkall = true;
    }
  
    $scope.uncheckAll = function(){
     $scope.checkall = false;
    }
   
   }]);
  
</script>
</html>

I hope it can help you...



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github LinkedIn Twitter Facebook
***Do you want me hire for your Project Work? Then Contact US.

Tags :

AngularJS Check Example Source Code

Featured Post

We are Recommending you: