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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: