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...