Open In App

AngularJS ng-checked Directive

Last Updated : 28 Jul, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked. 

Syntax:

<input type="checkbox|radio" 
    ng-checked="expression"> 
    Contents... 
</input>

If the expression returns true then the element's checked attribute will be checked. 

Example: This example uses the ng-checked Directive to select the checkbox and return the all selected checkbox value. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
          ng-checked Directive
      </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app">
    <div ng-controller="geek">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>ng-checked Directive</h3>
        <input type="checkbox" 
               ng-checked=
        "check1 && check2 && check3 && check4 && check5" 
               ng-model="isChecked" />
          <b>Select All</b><br>
        <input type="checkbox" 
               ng-model="check1" 
               ng-checked="isChecked" />First
        <br>
        <input type="checkbox" 
               ng-model="check2" 
               ng-checked="isChecked" />Second
        <br>
        <input type="checkbox" 
               ng-model="check3" 
               ng-checked="isChecked" />Three
        <br>
        <input type="checkbox" 
               ng-model="check4" 
               ng-checked="isChecked" /> Four
        <br>
        <input type="checkbox" 
               ng-model="check5" 
               ng-checked="isChecked" />Five
        <br> 
        <b>isAllSelected = {{isChecked}}</b> 
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', 
            ['$scope', function($scope) {}]);
    </script>
</body>
</html>

Output:

 

Example: This example describes the ng-checked Directive to check & uncheck all at once.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        ng-checked Directive
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>ng-checked Directive</h3>
    <div ng-controller="geek">
        <input type="checkbox" 
               ng-checked="checkMe" />DSA
        <br />
        <input type="checkbox" 
               ng-checked="checkMe" />Web Tech
        <br />
        <input type="checkbox" 
               ng-checked="checkMe" />
                 Programming Language
        <br />
        <button value="Check" 
                ng-click="check()">
            Check
        </button>
        <button value="Uncheck" 
                ng-click="uncheck()">
            Uncheck
        </button>
    </div>
    <script>
        var clickModify = angular.module('app', []);
        clickModify.controller('geek', ['$scope', '$http',
            function($scope, $http) {
                $scope.check = function() {
                    $scope.checkMe = true;
                };
                $scope.uncheck = function() {
                    $scope.checkMe = false;
                };
            },
        ]);
    </script>
</body>
</html>

Output:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox