How to check/uncheck all check boxes using AngularJS?

Question

I'm new in AngularJS and trying to achieve check/uncheck all check boxes by clicking "toggle" button, which is styled by bootstrap.

Markup:

<button id="toggle" class="btn btn-link btn-mini" ng-click="setActionTypesAllCheck()">Check all</button>

<div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes">
<div class="checkbox">
    <label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
</div>
</div>

JavaScript:

$scope.setActionTypesAllCheck = function () {
    $.each($scope.actionsQuery.actionTypes, function (i, cb) {
        cb.checked = !cb.checked;
    });
};

At this moment the code in JavaScript checks and unchecks all check boxes, but it doesn't take into account if some of them was manually checked/unchecked, which means it doesn't work properly.

So, I need to check all check boxes by clicking "toggle" button and change its name to "Uncheck all" no matter if some of check boxes is checked or not and vice versa, that is to uncheck all check boxes and change its name to "Check all" no matter if some of check boxes is checked or not.

sylwester · Accepted Answer · 2014-09-29 12:38:20Z

1

var app = angular.module("app", []);


function MainCtrl() {

  var vm = this;
  vm.message = "Welcome";
  vm.actionsQuery =

    {
      actionTypes: [

        {
          checked: true,
          Description: "Jon"
        }, {
          checked: false,
          Description: "Bon"
        }, {
          checked: false,
          Description: "Tim"
        }

      ]
    };
  vm.selected = function() {


  }
  vm.checkoxesState = true;

  vm.UpdateCheckboxes = function() {


    angular.forEach(vm.actionsQuery.actionTypes, function(at) {

      at.checked = vm.checkoxesState;

    });
    vm.checkoxesState = !this.checkoxesState


  };




}





angular.module("app").controller("MainCtrl", MainCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<body ng-controller="MainCtrl as vm">
  <div class="container">
    <h3>{{vm.message}}</h3>
<form>
    <button id="toggle" class="btn btn-link btn-mini" ng-click="vm.UpdateCheckboxes()">
      <span ng-show="vm.checkoxesState">   Check all </span>
      <span ng-hide="vm.checkoxesState">   Uncheck All </span>
    </button>


    <div class="row-fluid" ng-repeat="at in vm.actionsQuery.actionTypes">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
      </div>
    </div>
  </form>

  </div>

</body>

</html>

edited Sep 29, 2014 at 12:38

answered Sep 24, 2014 at 13:01

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tesicg Over a year ago

I need to change to text on button as well in the following way: when all check boxes are checked to "Uncheck all" and vice versa.

sylwester Over a year ago

@tesicg and which button should be shown when only one 'checkbox' is checked ?

tesicg Over a year ago

There should be only one button, not two.

sylwester Over a year ago

@tesicg ok but which one if one checkbox is selected ?

tesicg Over a year ago

I have an additional question about this solution - why this code is doing post back when <form> tag exists on the page?

|

Luffy · Accepted Answer · 2014-09-24 13:03:15Z

1

I have been using this directive for checkboxes. Its simple and it has examples that you need.

answered Sep 24, 2014 at 13:03

Luffy

2,32716 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to check/uncheck all check boxes using AngularJS?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related