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:
Recommended Posts:
- How to set checkbox checked on button click in AngularJS ?
- How to add input fields dynamically on button click in AngularJS ?
- How to get the value of radio button using AngularJS ?
- HTML | DOM Input Radio checked Property
- How to create a radio button similar to toggle button using Bootstrap ?
- AngularJS | ng-checked Directive
- Alternative of ng-checked to get the checkbox's state in AngularJS
- AngularJS | ng-click Directive
- What is the use of a double-click event in AngularJs?
- How to directly update a field by using ng-click in AngularJS ?
- How to call PHP function on the click of a Button ?
- How to load notification alert on top right corner without click of button in bootstrap ?
- How to create button dynamically with click event in Angular ?
- How to add a pressed effect on button click in CSS?
- How to change the href value of <a> tag after click on button using JavaScript ?
- How to create a Ripple Effect on Click the Button ?
- How to click a button on webpage using selenium ?
- Radio Button Vs Checkbox in HTML
- How to check a radio button with jQuery?
- How to know which radio button is selected using jQuery?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
