Alternative of ng-checked to get the checkbox’s state in AngularJS
The task is to get the state of the checkboxes with the help of AngularJS.
Approach:
- ng-model is used to get the selected checkboxes.
- Just set the different values to the ng-model and those will be used to check whether the element is selected or not.
- An alert will pop-up for the selected checkboxes with true values.
Example 1:
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.selCheckboxes = ''; $scope.getSelCheckB = function (myCheckbox) { alert(JSON.stringify(myCheckbox)); }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Alternative of ng-checked to get the checkbox's state in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Checkbox1 : <input type="checkbox" name="checkbox1" ng-model='myCheckbox.val1' /> <br /> Checkbox2 : <input type="checkbox" name="checkbox2" ng-model='myCheckbox.val2' /><br /> Checkbox3 : <input type="checkbox" name="checkbox3" ng-model='myCheckbox.val3' /><br /> Checkbox4 : <input type="checkbox" name="checkbox4" ng-model='myCheckbox.val4' /><br /> <br> <button ng-click="getSelCheckB(myCheckbox)"> Click </button> </form> </div> </div></body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Example 2:
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.selCheckboxes = ''; $scope.getSelCheckB = function (myCheckbox) { $scope.selCheckboxes = angular.copy(myCheckbox); }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Alternative of ng-checked to get the checkbox's state in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Checkbox1 : <input type="checkbox" name="checkbox1" ng-model='myCheckbox.val1' /> <br /> Checkbox2 : <input type="checkbox" name="checkbox2" ng-model='myCheckbox.val2' /><br /> Checkbox3 : <input type="checkbox" name="checkbox3" ng-model='myCheckbox.val3' /><br /> Checkbox4 : <input type="checkbox" name="checkbox4" ng-model='myCheckbox.val4' /><br /> <br> <button ng-click="getSelCheckB(myCheckbox)"> Click </button> </form> <p>Selected Checkboxes = {{selCheckboxes | json}}</p> </div> </div></body> </html> |
Output:
