In this article I will explain how to check whether a CheckBox is checked or unchecked using AngularJS.
The status of the CheckBox i.e. checked or unchecked will be determined on Button click inside the AngularJS Controller.
 
 
AngularJS: Check if a CheckBox 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 an HTML CheckBox set with ng-model directive and a 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.
 
<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 ($scope.HasPassport) {
                    $window.alert("CheckBox is checked.");
                } else {
                    $window.alert("CheckBox is not checked.");
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Do you have Passport?
        <label for="chkPassport">
            <input id="chkPassport" type="checkbox" ng-model="HasPassport" />
        </label>
        <input type="button" value = "Check Passport" ng-click = "CheckPassport()" />
    </div>
</body>
</html>
 
 
Screenshot
AngularJS: Check whether CheckBox is checked or unchecked
 
 
Demo
View Demo
 
 
Downloads
Download Code