How to set checkbox checked on button click in AngularJS ? - GeeksforGeeks

14 Oct, 2020
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>
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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?