How to set radio button checked by button click in AngularJS ?
In this article, we will see how to set the radio button checked by button click in AngularJS.
Approach: The approach is to use the ng-checked to check the radio button in the DOM. In the first example, a single radio button is checked by the button and In the second example, multiple radio button are checked by button. ng-model is used to bind the radio buttons.
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.radioCh = function () { if (!$scope.radio) { $scope.radio = true; } else { $scope.radio = false; } } }); </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > How to set radio button checked by button click in AngularJS </ p > < div ng-app = "app" > < div ng-controller = "controller" > Radio button: < input type = "radio" ng-checked = "radio" > < br >< br > < button ng-click = "radioCh()" ng-model = 'radio' > Click here </ 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.radioCh = function () { if (!$scope.radio) { $scope.radio = true; } else { $scope.radio = false; } } }); </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > How to set radio button checked by button click in AngularJS </ p > < div ng-app = "app" > < div ng-controller = "controller" > Radio button 1: < input type = "radio" ng-checked = "radio" > < br >< br > Radio button 2: < input type = "radio" ng-checked = "radio" > < br >< br > Radio button 3: < input type = "radio" ng-checked = "radio" > < br >< br > < button ng-click = "radioCh()" ng-model = 'radio' > Click here </ button > < br >< br > </ div > </ div > </ body > </ html > |
Output: