Check all check boxes in AngularJS

Question

I'm new in AngularJS. Please have look to this:

Now when user clicks on "All" link, all the 11 check boxes should be checked and when user clicks on "None" link, all the 11 check boxes should be unchecked.

Plus when user check the All others check box, all the bottom 9 check boxes should be checked and when user uncheck the All others check box, all the bottom 9 check boxes should be unchecked.

I'm able to achieve one of the task at a time, but not simultaneously. So, can anybody please help me to achieve both the tasks simultaneously?

Any help would be appreciated.

Would be good if anyone can give me plucker or jsfiddle demo which has with my exact functionality i.e both ways to check checkboxes — Parth Vora
– Parth Vora, Commented Sep 15, 2015 at 10:15
It would be even better if you can share your attempt to achieve it! — Rahul Tripathi
– Rahul Tripathi, Commented Sep 15, 2015 at 10:25
Here inly 9 check box's . where is another two check boxes? and also please send your code... — Ramesh Rajendran
– Ramesh Rajendran, Commented Sep 15, 2015 at 10:25

sahil gupta · Accepted Answer · 2015-09-16 10:47:13Z

3

You can use

HTML

<body ng-controller="MainCtrl">
    <button ng-click="selectAll()">Select All</button>
    <button ng-click="clearAll()">Clear All</button>
    <input type="checkbox" ng-model="select" ng-click="checkAll()" />
    <br />

    <p>Checkboxes</p>
    <input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>

Angular

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

app.controller('MainCtrl', function($scope) {
  $scope.checkbox = [
    {
      selected: false
    },
    {
      selected: false
    },
    {
      selected: false
    }
  ];
  // Check/uncheck all boxes
  $scope.selectAll = function () {
    $scope.select = true;
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = true;
    });
  };

  $scope.clearAll = function () {
    $scope.select = false;
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = false;
    });
  };

  $scope.checkAll = function () {
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = $scope.select;
    });
  };
});

Refer fiddle

edited Sep 16, 2015 at 10:47

answered Sep 15, 2015 at 10:26

sahil gupta

2,34914 silver badges14 bronze badges

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

4 Comments

Parth Vora Over a year ago

thanks a lot for your answer and detailed explanation with code. The only problem is now that my check box is inside a accordion that make issue with your solution. stackoverflow.com/questions/32604689/… Any idea how to solve that?

Parth Vora Over a year ago

Sahil Gupta, there is an issue in your updated fiddle: First check main check box (beside the clear all button), then uncheck any 2-3 check boxes from the bottom check box row, now click on select all, it won't check those check boxes which you just have unchecked. Any idea how to solve that?

sahil gupta Over a year ago

@ParthVora : Yeah this is a issue because as per angular doc "ng-checked" directive should not be used together with "ngModel". This is because ng-checked is expecting an expression, so by saying ng-checked="true", it is saying that the checkbox will always be checked by default.

sahil gupta Over a year ago

I misunderstood the same . Removing the updated answer. Sorry for the same. The best way to do is to use the first solution.

saurabh · Accepted Answer · 2015-09-15 11:08:03Z

2

Html

 <button ng-click="selectAll()"> all</button>
 <div ng-repeat="item in items">
    <input type="checkbox" ng-model="selected[item.id]">
  </div>

JQuery

$scope.selected = {};
$scope.selectAll= function(){
    for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];
    $scope.selected[item.id] = true;
    }
 };

answered Sep 15, 2015 at 11:08

saurabh

296 bronze badges

Comments

Azad · Accepted Answer · 2015-09-15 10:40:45Z

0

you can use ng-Checked Its makes you easier

refer ng-Checked

answered Sep 15, 2015 at 10:40

Azad

5,2725 gold badges32 silver badges59 bronze badges

1 Comment

Schw2iizer Over a year ago

ng-checked just sets a boolean rather than setting the value of the ng-model

David · Accepted Answer · 2020-11-24 06:32:21Z

0

<md-checkbox ng-click="checked = !checked; check = {}"></md-checkbox>
<div ng-repeat="item in [1,2,3,4,5]">
    <md-checkbox ng-checked="checked || check[item]" ng-click="check[item] = !check[item]" ng-model="sel[item]"></md-checkbox>
</div>

answered Nov 24, 2020 at 6:32

David

212 bronze badges

1 Comment

Ruli Over a year ago

Welcome to StackOverflow. While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Check all check boxes in AngularJS

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related