In this article, we will see how to get the state of the checkboxes in AngularJS. This task can be performed with the help of the ng-model directive that helps to bind input, select and textarea, and store the required user value in a variable and we can use that variable whenever we require that value.
Approach:
- ng-model is used to get the selected checkboxes.
- Just set the different values to the ng-model and those will be used to check whether the element is selected or not.
- An alert will pop-up for the selected checkboxes with true values.
Example 1: This example describes getting the state of the checkboxes that are displayed with the help alert message on clicking the button.
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.selCheckboxes = '';
$scope.getSelCheckB = function (myCheckbox) {
alert(JSON.stringify(myCheckbox));
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Alternative of ng-checked to get
the checkbox's state in AngularJS
</h3>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
Checkbox1 :
<input type="checkbox"
name="checkbox1"
ng-model='myCheckbox.val1' /><br />
Checkbox2 :
<input type="checkbox"
name="checkbox2"
ng-model='myCheckbox.val2' /><br />
Checkbox3 :
<input type="checkbox"
name="checkbox3"
ng-model='myCheckbox.val3' /><br />
Checkbox4 :
<input type="checkbox"
name="checkbox4"
ng-model='myCheckbox.val4' /><br />
<br>
<button ng-click="getSelCheckB(myCheckbox)">
Click
</button>
</form>
</div>
</div>
</body>
</html>
Output:
Example 2: This example describes getting the state of the checkboxes on clicking the button.
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.selCheckboxes = '';
$scope.getSelCheckB = function (myCheckbox) {
$scope.selCheckboxes
= angular.copy(myCheckbox);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Alternative of ng-checked to get the
checkbox's state in AngularJS
</h3>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
Checkbox1 :
<input type="checkbox"
name="checkbox1"
ng-model='myCheckbox.val1' /><br />
Checkbox2 :
<input type="checkbox"
name="checkbox2"
ng-model='myCheckbox.val2' /><br />
Checkbox3 :
<input type="checkbox"
name="checkbox3"
ng-model='myCheckbox.val3' /><br />
Checkbox4 :
<input type="checkbox"
name="checkbox4"
ng-model='myCheckbox.val4' /><br />
<br>
<button ng-click="getSelCheckB(myCheckbox)">
Click
</button>
</form>
<p>Selected Checkboxes = {{selCheckboxes | json}}</p>
</div>
</div>
</body>
</html>
Output:
