Skip to content
Related Articles

Related Articles

AngularJS ng-checked Directive

Improve Article
Save Article
  • Last Updated : 28 Jul, 2022
Improve Article
Save Article

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=
    </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=
    </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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!