In this article, we will see how to set checkbox checked on the click of a button in AngularJS.
Approach: The approach is to use the ng-checked 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 checkbox are checked by button. ng-model is used to bind the checkboxes.
Example 1:
<!DOCTYPE HTML> <html> <head> <script src= "//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.checkIt = function () { if (!$scope.check) { $scope.check = true; } else { $scope.check = false; } } }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to set checkbox checked on button click in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> Checkbox: <input type="checkbox" ng-checked="check"> <br> <br> <button ng-click="checkIt()" ng-model='check'> Click to Check </button> <br> <br> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
<!DOCTYPE HTML> <html> <head> <script src= "//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.checkIt = function () { if (!$scope.check) { $scope.check = true; } else { $scope.check = false; } } }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to set checkbox checked on button click in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> Checkbox1: <input type="checkbox" ng-checked="check"> <br> Checkbox2: <input type="checkbox" ng-checked="check"> <br> Checkbox3: <input type="checkbox" ng-checked="check"> <br> <br> <button ng-click="checkIt()" ng-model='check'> Click to Check </button> <br> <br> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- How to set radio button checked by button click in AngularJS ?
- Alternative of ng-checked to get the checkbox's state in AngularJS
- How to add input fields dynamically on button click in AngularJS ?
- How to read if a checkbox is checked in PHP?
- HTML | DOM Input Checkbox checked Property
- How to check whether a checkbox is checked in jQuery?
- AngularJS | ng-checked Directive
- AngularJS | ng-click Directive
- What is the use of a double-click event in AngularJs?
- How to directly update a field by using ng-click in AngularJS ?
- Radio Button Vs Checkbox in HTML
- How to move button in the same line with Checkbox and Textbox using JavaScript ?
- How to call PHP function on the click of a Button ?
- How to load notification alert on top right corner without click of button in bootstrap ?
- How to create button dynamically with click event in Angular ?
- How to add a pressed effect on button click in CSS?
- How to click a button on webpage using selenium ?
- How to change the href value of <a> tag after click on button using JavaScript ?
- How to create a Ripple Effect on Click the Button ?
- How to make sure clients have enough words in textarea by using angularjs in order to disable/enable a button?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
