How to set checkbox checked on button click in AngularJS ?
In this article, we will see how to set checkbox checked on the click of a button in AngularJS.
Approach: The approach is to use the ng-checked 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 checkbox are checked by button. ng-model is used to bind the checkboxes.
Example 1:
<!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> <p> How to set checkbox checked on button click in AngularJS </p> <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:
<!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> <p> How to set checkbox checked on button click in AngularJS </p> <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:
