In this article I will explain with an example, how to check whether a RadioButton is checked or unchecked using AngularJS.
The status of the RadioButton i.e. checked or unchecked will be determined on Button click inside the AngularJS Controller.
 
 
AngularJS: Check if a RadioButton is checked or unchecked
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The AngularJS app HTML DIV consists of two HTML RadioButtons set with ng-model directive and ng-value directive. The ng-model is set with a boolean model variable named HasPassport.
There is also an HTML Button set with ng-click directive.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
When the Button is clicked, the CheckPassport function of the Controller gets called, which first checks the value of the model variable HasPassport and based on whether it is true or false it displays respective messages using JavaScript Alert message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.CheckPassport = function () {
                if (typeof ($scope.HasPassport) != "undefined") {
                    if ($scope.HasPassport) {
                        $window.alert("RadioButton YES is checked.");
                    } else {
                        $window.alert("RadioButton NO is checked.");
                    }
                } else {
                    $window.alert("RadioButtons are not checked.");
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Do you have Passport?
        <label>
            <input type="radio" ng-model="HasPassport" ng-value="true" />
            Yes
        </label>
        <label>
            <input type="radio" ng-model="HasPassport" ng-value="false" />
            No
        </label>
        <input type="button" value="Check Passport" ng-click="CheckPassport()" />
    </div>
</body>
</html>
 
 
Screenshot
AngularJS RadioButton: Check whether RadioButton is checked or unchecked in AngularJS
 
 
Demo
View Demo
 
 
Downloads