How to set radio button checked by button click in AngularJS ? Last Updated : 12 Sep, 2022 Comments Improve Suggest changes 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 set radio button checked by button click in AngularJS ? P PranchalKatiyar Follow Improve Article Tags : Web Technologies HTML 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 create mat-button-toggle-group as read only mode in AngularJS ? Angular Material is a UI component library 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. Installation 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 How to Change Label when Radio Button Checked in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly style their web applications without writing much CSS code. In this article, we will discuss how to change the label text of a radio button when it is checked using Tailwind CSS. We will explore different approa 3 min read How to check a radio button with jQuery? There are two methods by which one can dynamically change the currently selected radio button by changing the checked property of the input type. Method 1: Using prop method: The input can be accessed and its property can be set by using the prop method. This method manipulates the 'checked' propert 3 min read Bootstrap 5 Checks and radios Checkbox Toggle buttons Bootstrap 5 Checks and radios Checkbox Toggle buttons are a way of visualizing the checkboxes as buttons and primarily the .form-check is changed to .btn-check and the .form-check-label is changed to buttons classes. There are three toggle states, the first is checked followed by unchecked and disab 2 min read How to execute AngularJS controller function on page load ? In this article, we will see how to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization. Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this speci 2 min read How to create a radio button similar to toggle button using Bootstrap ? Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. The Wi 3 min read Like