Alternative of ng-checked to get the checkbox's state in AngularJS Last Updated : 04 Aug, 2022 Comments Improve Suggest changes Like Article Like 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </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: Comment More infoAdvertise with us Next Article Alternative of ng-checked to get the checkbox's state in AngularJS P PranchalKatiyar Follow Improve Article Tags : Web Technologies HTML AngularJS AngularJS-Questions Similar Reads How to set checkbox checked on button click in AngularJS? In this article, we will see how to set checkboxes checked with the click of a button in AngularJS. Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkbo 2 min read How to disable a button depending on a checkbox’s state in AngularJS ? In this article, we will learn to disable the button depending upon the check-box status in Angular. We will use the Angular JS directive named ng-disabled to disable the button by unchecking the box. Please refer to AngularJS ng-disabled Directive. The ng-disabled directive is used to enable or dis 2 min read How to get all checked values of checkbox in JavaScript ? A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v 2 min read How to change the button color after clicking it using AngularJS ? Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t 2 min read <mat-checkbox> in Angular Material Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it. <mat 2 min read How to determine active route in AngularJS ? In this article, we will see how to determine the active route in AngularJS, along with understanding the basic implementation through the example. Approach: To determine which is the active route at any moment in AngularJS this can be achieved by using $on() & $location.path() method. An event 2 min read How to set active tab style with AngularJS ? In this article, we will see how to set an active tab style using AngularJS, & will also understand its implementation through the example. This task can be accomplished by implementing the isActive and the ng-controller method. We will perform this task with 2 different methods. Method 1: The n 2 min read How to show a span element for each rows clicked in AngularJS ? In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span e 4 min read Semantic-UI Checkbox Checked State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Chec 2 min read How to directly update a field by using ng-click in AngularJS ? In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a 3 min read Like