How to check if any Checkbox is Checked or Unchecked in AngularJS

If you are working with forms in AngularJS, I am sure you have come across a situation where you have checkboxes in your AngularJS form and you want to check if a user has selected (or checked) one of the checkboxes before submitting the form. Here, I’ll show you how to check if any checkbox is checked or unchecked from your AngularJS $scope.

Let’s assume you have a list of items (books perhaps) and you wish to show these items in the form of checkboxes. Your users will have multiple items to choose. I am using AngularJS ng-init directive to store the items and obviously, I would need an ng-repeat directive to populate the items to the checkboxes.

To bind the data (list of items) to the checkbox, I would need the ng-model directive.

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController"
        ng-init="list=[
            { name:'Computer Architecture' }, 
            { name:'Advanced Composite Materials'}, 
            { name:'Stategies Unplugged' }, 
            { name:'Teaching Science' }, 
            { name:'Challenging Times' }]">

        <div ng-repeat="books in list">
            <input type="checkbox" ng-model="books.selected"
                ng-true-value="'{{books.name}}'" ng-false-value="''"
                id="'{{books.name}}'" />

            {{ books.name }}
        </div>
        
        <p><button ng-click="submit(list)">Submit</button></p>

        <p>{{the_list}}</p>
    </div>
</body>

The list above has five items and using the ng-repeat (a loop) directive, I am extracting and assigning the items one by one to a checkbox.

Remember: You can also initialize values to the checkboxes through the controller.

Each checkbox is attached with three ng directives. The ng-model will set the $scope to the selected item. The directive “ng-true-value” is assigned to each checkbox (just like ng-model) and has an item each. This item description is sent to the expression when selected. The ng-false-value has nothing.

Read more about ng-true-value and ng-false-value here.

The $Scope

<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController', ['$scope', function ($form) {
        $form.submit = function (list) {
            var books = [];
            angular.forEach(list, function (value, key) {
                if (list[key].selected == list[key].name) {
                    books.push(list[key].selected);
                }
            });

            // SHOW THE SELECTED ITEMS IN THE EXPRESSION.
            if (books.length > 0)
                $form.the_list = books.toString();
            else
                $form.the_list = 'Please choose an option';
        }
    } ]
    );
</script>
</html>

Try it

The $scope takes a parameter as list that holds all the items. We’ll loop through each item in the list and check if selected items matches with the item names in the list. If yes, we’ll add the selected item in an array for the operation. Else, show a message to the user.

← PreviousNext →