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:
Share your thoughts in the comments
