Open In App

How to set checkbox checked on button click in AngularJS?

Improve
Improve
Like Article
Like
Save
Share
Report

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 checkboxes are checked by the button. The ng-model directive is used to bind the checkboxes.

Example 1: This example describes the implementation of the ng-checked directive to check the checkbox in AngularJS.

HTML




<!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>
    <h3>
        How to set checkbox checked on
        button click in AngularJS
    </h3>
    <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:  This example describes the implementation of the ng-checked directive by specifying the multiple checkboxes to check by clicking the button in AngularJS.

HTML




<!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>
    <h3>
        How to set checkbox checked on
        button click in AngularJS
    </h3>
    <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:

 



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