How to set checkbox checked on button click in AngularJS?
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:

Please Login to comment...