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, Sep 15 '15 at 10:15
It would be even better if you can share your attempt to achieve it! — Rahul Tripathi, Sep 15 '15 at 10:25
Here inly 9 check box's . where is another two check boxes? and also please send your code... — Ramesh Rajendran, Sep 15 '15 at 10:25

sahil gupta · Accepted Answer · 2015-09-16T10:47:13.500

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 '15 at 10:47

answered Sep 15 '15 at 10:26

sahil gupta

2,339
12
14

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. http://stackoverflow.com/questions/32604689/issue-in-angular-bootstrap-directive-while-trying-to-access-scope Any idea how to solve that? – Parth Vora Sep 16 '15 at 09:48
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? – Parth Vora Sep 16 '15 at 10:26
@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 Sep 16 '15 at 10:46
I misunderstood the same . Removing the updated answer. Sorry for the same. The best way to do is to use the first solution. – sahil gupta Sep 16 '15 at 10:46

score 2 · Answer 2 · answered Sep 15 '15 at 11:08

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;
    }
 };

score 0 · Answer 3 · answered Sep 15 '15 at 10:40

0

you can use ng-Checked Its makes you easier

refer ng-Checked

answered Sep 15 '15 at 10:40

Azad

5,144
4
28
56

ng-checked just sets a boolean rather than setting the value of the ng-model – Schw2iizer Jul 14 '16 at 17:24

score 0 · Answer 4 · answered Nov 24 '20 at 06:32

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 '20 at 06:32

David

21
2

Welcome to StackOverflow. While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) 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](https://stackoverflow.com/posts/64981318/edit) your answer to add explanations and give an indication of what limitations and assumptions apply. – Ruli Nov 24 '20 at 08:54

Check all check boxes in AngularJS

4 Answers4

Linked