Open In App
Related Articles

How to set radio button checked by button click in AngularJS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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:

 



Last Updated : 12 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads