How To Get Value Of Multiple Checkbox In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to get value of multiple checkbox in angularjs, using directive of ‘ng-model’ we collects input values from checkbox value and directive ‘ng-click’ used to calls GetValue() function here we defined how to check which checkbox checked by user and how to display those values on webpage.
We created checkbox options as json array format so we can change as per our own choice.
Step By Step Guide On How To Get Value Of Multiple Checkbox In Angularjs :-
In application we defined ‘ng-repeat’ for iterate and prints all checkbox options. Ng-repeat directive repeats a set of HTML, a given number of times.
The set of HTML will be repeated once per item in a collection. Each checkbox created with attribute of ‘id and ng-model’ id for reference and ng-model for stores checkbox value.
In controller we defined our array with ‘FruitId, Name, Selected’ informations and in GetValue() function using ‘for’ loop we iterated each values in array then checking which one is checked by user then its id and name stored to respective variables ‘fruitId, fruitName’.
Those result appends to variable ‘msg’ then displayed on windows alert box.
<!DOCTYPE html>
<html>
<head>
<title>Multiselect Checkbox</title>
</head>
<body>
<script src="https://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, $window) {
$scope.Fruits = [{
FruitId: 1,
Name: 'Apple',
Selected: false
}, {
FruitId: 2,
Name: 'Mango',
Selected: false
}, {
FruitId: 3,
Name: 'Orange',
Selected: false
}];
$scope.GetValue = function () {
var message = "";
for (var i = 0; i < $scope.Fruits.length; i++) {
if ($scope.Fruits[i].Selected) {
var fruitId = $scope.Fruits[i].FruitId;
var fruitName = $scope.Fruits[i].Name;
message += "Value: " + fruitId + " Text: " + fruitName + "\n";
}
}
$window.alert(message);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="fruit in Fruits">
<input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" /> {{fruit.Name}}
</div>
<br />
<br />
<input type="button" value="Get" ng-click="GetValue()" />
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- In controller scope we defined our application and hold by variable ‘app’ then controller added to application with function defined $scope object as a parameters in it.
- In function we defined array ‘Fruits[]’ with informations of ‘FruitId, Name, Selected’ and initially we sets ‘Selected’ to ‘false’ so nothing is selected in checkbox.
- Using $scope object we defined ‘GetValue()’ function here variable ‘msg’ initialized with null string and for loop defined for iterate ‘Fruits’ array values. The if() condition checks which checkbox is user selected when user clicks on checkbox its selected value changed to ‘true’. So here we can easily collects those checkbox values.
- The variables ‘fruitId, fruitName’ used to store user checked checkbox values and appends to ‘msg’ string variable after collected all values finally displayed on windows alert box.
- Within a <div> tag we defined our ng-app namely ‘MyApp’ it defines our application and controller of application namely ‘MyController’ by ng-controller directive.
- Another <div> tag created for using ‘ng-repeat’ iterate all array names once to print as a label for checkbox. After that we defined <input> tag with checkbox type and two attributes ‘id,ng-model’.
- Lastly <input> tag with button type for calls ‘GetValue()’ function.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get value of multiple checkbox in angularjs.
When user loads our program on webpage it executes to print all fruit names near checkbox and then after checked some checkbox on display when user clicks on ‘Get’ button it opens window alert box.
The window alert box will appear on top of center of browser this is browser default window alert box. On that we displayed our checkbox name value as a result.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
I hope this tutorial on how to get value of multiple checkbox in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
