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 — john
– john, Commented Aug 24, 2015 at 10:35

cubbuk · Accepted Answer · 2015-08-24 10:47:42Z

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 · Accepted Answer · 2015-08-24 13:36:42Z

1

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

edited Aug 24, 2015 at 13:36

answered Aug 24, 2015 at 13:29

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related