Open In App
Related Articles

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

Improve Article
Improve
Save Article
Save
Like Article
Like

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:

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 12 Sep, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials