In this article I will explain with an example, how to implement Check Uncheck All / Select Deselect All multiple CheckBoxes in HTML Table using AngularJS.
The HTML Table with CheckBoxes will be implemented using ng-repeat directive and the CheckBox in Header Row will be used to Check Uncheck All / Select Deselect All multiple CheckBoxes in HTML Table using AngularJS.
AngularJS Table: Check Uncheck All / Select Deselect All CheckBoxes in HTML Table
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive.
Each row of HTML Table along with the Header row consists of an HTML CheckBox.
Population of multiple CheckBoxes
Inside the Controller, an array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
Check Uncheck All functionality
There are two methods which implement the Check Uncheck All functionality.
CheckUncheckHeader – This method as the name suggests take care of making sure when the Header row CheckBox will be checked and when it will be unchecked.
This method is called when the AngularJS App is initialized and also called using the ng-change directive of the row CheckBoxes.
Inside this method, a loop is executed and if all the row CheckBoxes are checked, then the IsAllChecked Model variable (which sets the Header row CheckBox) to True and if even one row CheckBox is unchecked then the IsAllChecked Model variable is set to False.
CheckUncheckAll – This method is assigned to the ng-change directive of the Header row CheckBox. When the Header row CheckBox is checked, then it checks all the row CheckBoxes and when the Header row CheckBox is unchecked, it unchecks all the row CheckBoxes.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Country: "United States", Selected: true },
{ CustomerId: 2, Name: "Mudassar Khan", Country: "India", Selected: true },
{ CustomerId: 3, Name: "Suzanne Mathews", Country: "France", Selected: true },
{ CustomerId: 4, Name: "Robert Schidner", Country: "Russia", Selected: true }
];
$scope.CheckUncheckHeader = function () {
$scope.IsAllChecked = true;
for (var i = 0; i < $scope.Customers.length; i++) {
if (!$scope.Customers[i].Selected) {
$scope.IsAllChecked = false;
break;
}
};
};
$scope.CheckUncheckHeader();
$scope.CheckUncheckAll = function () {
for (var i = 0; i < $scope.Customers.length; i++) {
$scope.Customers[i].Selected = $scope.IsAllChecked;
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th align = "left">
<label>
<input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
CustomerId</label>
</th>
<th>
Name
</th>
<th>
Country
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
<label for="chkCustomer_{{m.CustomerId}}">
<input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
{{m.CustomerId}}
</label>
</td>
<td>
{{m.Name}}
</td>
<td>
{{m.Country}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
![AngularJS Table: Check Uncheck All / Select Deselect All CheckBoxes in HTML Table]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
