In this article I will explain with an example, how to validate Group of CheckBoxes (Multiple CheckBoxes) using AngularJS.
When the Submit Button is clicked, the Model for each CheckBox in the Group will be referenced and using FOR loop, it will be validated that at-least one CheckBox is checked from the Group of CheckBoxes using AngularJS.
 
 
Validating Group of CheckBoxes (Multiple CheckBoxes) using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The AngularJS app HTML DIV consists of an HTML Table with a Group of CheckBoxes to be validated, an HTML SPAN for displaying the error message and a HTML Button.
The ng-repeat directive has been applied to the TBODY tag of the HTML Table in order to populate Group of CheckBoxes from a JSON array.
The ng-model attribute of the CheckBox has been assigned the Selected property. Thus whenever a CheckBox is selected, the Selected property for the corresponding object in the JSON array will be set to TRUE.
The Button has been assigned ng-click directive. When the Button is clicked, the Submit function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Inside the function, a FOR loop is executed over the JSON array and the Selected property of each CheckBox is verified whether it is True.
If at-least one CheckBox is checked, then the validation is successful else an error message is displayed using AngularJS.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.IsValid = null;
        $scope.Fruits = [{
            FruitId: 1,
            Name: 'Mango',
            Selected: false
        }, {
            FruitId: 2,
            Name: 'Apple',
            Selected: false
        }, {
            FruitId: 3,
            Name: 'Banana',
            Selected: false
        }, {
            FruitId: 4,
            Name: 'Grapes',
            Selected: false
        }, {
            FruitId: 5,
            Name: 'Orange',
            Selected: false
        }];
        $scope.Submit = function () {
            $scope.IsValid = false;
            for (var i = 0; i < $scope.Fruits.length; i++) {
                if ($scope.Fruits[i].Selected) {
                    $scope.IsValid = true;
                    break;
                }
            }
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table id="Table1" border="0" cellpadding="0" cellspacing="0">
        <tbody ng-repeat="fruit in Fruits">
            <tr>
                <td>
                    <input type="checkbox" value="{{fruit.FruitId}}" ng-model="fruit.Selected" />
                </td>
                <td>
                    {{fruit.Name}}
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <span id="spnError" class="error" ng-hide="IsValid == null || IsValid">Please select at-least one Fruit.</span>
    <br />
    <input type="button" value="Submit" ng-click="Submit()" />
</div>
 
 
Screenshot
Validate Group of CheckBoxes (Multiple CheckBoxes) using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code