Toggle all Angular checkboxes in a group

Question

I have a table of text-checkbox items, each with a description and a checkbox. I now need to add an uber-checkbox that will either clear or check all boxes. The current code, is shown below, with my first attempt at a solution highlighted.

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered">            
     <tr id="myBlusteringAttempt">  
        <td width="90%">
            <p>Clear/Check all options</p>
        </td>
        <td width="10%" align="center" valign="middle">
            <input type="checkbox" ng-change="toggleCheckboxes()">
        </td>
    </tr>
    <tr id="existing-code-that-works" ng-repeat="declaration in LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations">
        <td width="90%">
            <p>{{declaration.DeclarationText}}</p>
        </td>
        <td width="10%" align="center" valign="middle">
            <input type="checkbox" ng-model="declaration.AcceptDeclaration">
        </td>
    </tr>
</table>

I could probably so easily do this with jQuery, but I'd rather use Angular's jQuery facade, and let there be no miscegenation of frameworks.

is the `declaration.AcceptDeclaration` of ng-repeat going to be toggle from `toggleCheckboxes` method? — Pankaj Parkar, Jul 04 '15 at 14:34
@pankajparkar Either from that method, or what ever way I find that works, with the help here. — ProfK, Jul 04 '15 at 15:01

score 1 · Answer 1 · answered Jul 04 '15 at 13:52

In toggleCheckboxes, you just need to set all the models to the value you want.

var currentAllStatus = false;
$scope.toggleCheckboxes = function () {
    currentAllStatus = !currentAllStatus;
    $scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations.forEach(function (declaration) {
        declaration.AcceptDeclaration = currentAllStatus;
    });
};

score 0 · Accepted Answer · edited May 23 '17 at 11:44

First things first you need to setup an ng-model to the toggle checkbox in order to make this thing work, or else Angular may probably complain:

<input type="checkbox" ng-model="toggle" ng-change="toggleCheckboxes()">

Afterwards, you should loop your results and bind them with the checkbox value:

    $scope.toggle = false;
    $scope.toggleCheckboxes = function () {
        angular.forEach($scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations, function (value, key) {
            value.AcceptDeclaration = $scope.toggle;
        });
    }

Full working example

The code of the example above

Edited I should notice that your approach of toggling UI elements as checkboxes is different to Angular's scope. Angular mostly is used as a databound MV* framework, fetching data into your view. You should read more about using Angular (or any other MV* framework like Backbone ) : "Thinking in AngularJS" if I have a jQuery background?

Yes, thanks, I actually didn't want to toggle the checkboxes together but the models bound to them. For strange reasons grouping by checkbox vs by model seems better. — ProfK, Jul 04 '15 at 14:28

Toggle all Angular checkboxes in a group

2 Answers2