Skip to content
Related Articles

Related Articles

Improve Article
Alternative of ng-checked to get the checkbox’s state in AngularJS
  • Last Updated : 01 Oct, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :