Open In App

Alternative of ng-checked to get the checkbox’s state in AngularJS

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to get the state of the checkboxes in AngularJS. This task can be performed with the help of the ng-model directive that helps to bind input, select and textarea, and store the required user value in a variable and we can use that variable whenever we require that value.

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: This example describes getting the state of the checkboxes that are displayed with the help alert message on clicking the button.

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>
    <h3>
        Alternative of ng-checked to get
        the checkbox's state in AngularJS
    </h3>
    <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:

 

Example 2: This example describes getting the state of the checkboxes on clicking the button.

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>
    <h3>
        Alternative of ng-checked to get the
        checkbox's state in AngularJS
    </h3>
    <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:

 



Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads