How to set radio button checked by button click in AngularJS ? Last Updated : 12 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to set the radio button checked by button click in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the ng-checked directive 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 buttons are checked by the button. The ng-model directive is used to bind the radio buttons. Example 1: This example illustrates setting the single radio button checked by button click in AngularJS. HTML <!DOCTYPE HTML> <html> <head> <title> Setting the radio button checked by button click in AngularJS </title> <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> <style> body { font-family: Arial, Helvetica, sans-serif; text-align: center; } h1 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to set radio button checked by button click in AngularJS </h3> <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: This example illustrates setting the multiple radio button checked simultaneously by button click in AngularJS. HTML <!DOCTYPE HTML> <html> <head> <title> Setting the radio button checked by button click in AngularJS </title> <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> <style> body { font-family: Arial, Helvetica, sans-serif; text-align: center; } h1 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to set radio button checked by button click in AngularJS </h3> <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> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to get the value of radio button using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : AngularJS AngularJS-Misc Similar Reads 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 checkbo 2 min read How to disable a button depending on a checkbox’s state in AngularJS ? In this article, we will learn to disable the button depending upon the check-box status in Angular. We will use the Angular JS directive named ng-disabled to disable the button by unchecking the box. Please refer to AngularJS ng-disabled Directive. The ng-disabled directive is used to enable or dis 2 min read How to get the value of radio button using AngularJS ? In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific e 2 min read How to change the button color after clicking it using AngularJS ? Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t 2 min read <mat-radio-button> in Angular Material Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it. <mat 2 min read How to show a span element for each rows clicked in AngularJS ? In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span e 4 min read Like