How to check/uncheck all other checkboxes using one checkbox in angularjs?

Question

$scope.checkAll = function() {
  if ($scope.selectedAll) {
    $scope.selectedAll = true;
  } else {
    $scope.selectedAll = false;
  }

  angular.forEach($scope.MyProducts, function(item) {
    item.Selected = $scope.selectedAll;
  });
  /*});*/
}

<div class="panel-heading col-xs-12">
  <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
</div>

<div id="gridView" ng-repeat="product in MyProducts">

  <input style="float:left" type="checkbox" ng-model="product.Selected" ng-checked="product.Selected" value="product.ProductId" />

</div>

As I'm using two divs Since I'm trying to use one checkbox which automatically check all other checkbox but I'm unable to do so I have shared html and my controller code, please help.

possible duplicate of [Angular Checkboxes "Select All" functionality with only one box selected initially](http://stackoverflow.com/questions/27451954/angular-checkboxes-select-all-functionality-with-only-one-box-selected-initial) — john, Aug 24 '15 at 10:35

score 1 · Answer 1 · answered Aug 24 '15 at 10:47

Here is an example how to do it. You don't need ng-checked, ng-model is sufficient to achieve what you want.

angular.module("myApp", []).controller("myCtrl", function($scope) {
  $scope.myProducts = [{
    selected: false,
    productId: 1,
    name: "CheckBox1"
  }, {
    selected: false,
    productId: 2,
    name: "CheckBox2"
  }];
  $scope.selectedAll = false;
  $scope.checkAll = function() {
    $scope.myProducts.forEach(function(product) {
      product.selected = !$scope.selectedAll;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

Shaishab Roy · Answer 2 · 2015-08-24T13:36:42.157

You can use ng-change instead of ng-click for check box value change.

In HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

In controller:

$scope.checkAll = function() {
   angular.forEach($scope.myProducts, function(product) {
         product.selected = $scope.selectedAll;
   });
 };

Working PLUNKER code

How to check/uncheck all other checkboxes using one checkbox in angularjs?

2 Answers2