In AngularJS with the model, it is easier to maintain values across elements and to define the model ng-model directive is been used.
To find a checkbox is been checked or not check the defined model. If it is TRUE means checkbox is been checked.
In this tutorial, I will show how you can retrieve single or multiple checked checkboxes.
Contents
1. Single Checkbox
For checking a single checkbox add ng-model directive on the checkbox element. I created a button and added ng-click='checkVal()' for checking the checkbox when it gets clicked.
In the <script> define checkVal() method from where retrieve the $scope.checkboxEl value if it TRUE means checkbox checked.
Assign a value to $scope.result according to checkbox checked status.
Example
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app='myapp'>
<div ng-controller="fetchCtrl">
<!-- Checkbox-->
<input type='checkbox' value='1' ng-model='checkboxEl'><br>
<input type='button' ng-click='checkVal()' value='Click'>
<br>
Result : <span >{{ result }}</span>
</div>
<!-- Script -->
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
// Check checkbox checked or not
$scope.checkVal = function(){
if ($scope.checkboxEl) {
$scope.result = "Checkbox checked";
} else {
$scope.result = "Checkbox Not checked";
}
}
}]);
</script>
</body>
</html>
Demo
Check uncheck the checkbox and click on the button.
2. Multiple Checkboxes
I have defined users JSON object in the <script> which is been used in the ng-repeat='user in users' to create multiple checkboxes with user name.
Defined ng-model='user.selected' on the checkbox.
On the button click loop on the users object using forEach() and check user.selected. If the value is TRUE then append user.name in checkedUsers variable.
Assign checkedUsers variable in $scope.result after reading all checked checkboxes values.
Example
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app='myapp'>
<div ng-controller="fetchCtrl">
<ul ng-repeat='user in users'>
<li><input type='checkbox' value='{{ user.name }}' ng-model='user.selected'> {{ user.name}}</li>
</ul>
<input type='button' ng-click='checkVal()' value='Click'>
<br><br>
Result : <span >{{ result }}</span>
</div>
<!-- Script -->
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
// Users list
$scope.users = [
{ id: 1, name: "Yogesh singh"},
{ id: 2, name: "Sonarika Bhadoria" },
{ id: 3, name: "Vishal Sahu" },
{ id: 4, name: "Anil singh" }
];
// Check checkboxes checked or not
$scope.checkVal = function(){
var checkedUsers = '';
$scope.users.forEach(function(user) {
if (user.selected) {
if(checkedUsers != ''){
checkedUsers += " , ";
}
checkedUsers += user.name;
}
});
$scope.result = checkedUsers;
}
}]);
</script>
</body>
</html>
Demo
Check checkboxes and click on the button.
4. Conclusion
Just define an ng-model directive in the checkbox and to find checkbox checked or not check model return value (TRUE or FALSE). If it has TRUE means checkbox is been checked.
If you found this tutorial helpful then don't forget to share.