How to set checkbox checked on button click in AngularJS?
Last Updated :
01 Aug, 2022
In this article, we will see how to set checkboxes checked with the click of a button in AngularJS.
Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkboxes are checked by the button. The ng-model directive is used to bind the checkboxes.
Example 1: This example describes the implementation of the ng-checked directive to check the checkbox in AngularJS.
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"//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.checkIt = function () {
if (!$scope.check) {
$scope.check = true;
} else {
$scope.check = false;
}
}
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to set checkbox checked on
button click in AngularJS
</h3>
<div ng-app="app">
<div ng-controller="controller">
Checkbox: <input type="checkbox" ng-checked="check">
<br>
<br>
<button ng-click="checkIt()" ng-model='check'>
Click to Check
</button>
<br>
<br>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example describes the implementation of the ng-checked directive by specifying the multiple checkboxes to check by clicking the button in AngularJS.
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src=
"//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.checkIt = function () {
if (!$scope.check) {
$scope.check = true;
} else {
$scope.check = false;
}
}
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to set checkbox checked on
button click in AngularJS
</h3>
<div ng-app="app">
<div ng-controller="controller">
Checkbox1: <input type="checkbox"
ng-checked="check">
<br>
Checkbox2: <input type="checkbox"
ng-checked="check">
<br>
Checkbox3: <input type="checkbox"
ng-checked="check">
<br><br>
<button ng-click="checkIt()"
ng-model='check'>
Click to Check
</button>
<br><br>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...