Angular Checkboxes "Select All" Functionality with Only One Box Selected Initially

Angular Checkboxes Select All functionality with only one box selected initially

Another way to go about it is to use a model for the options, set default selection in the model and have your controller handle the logic of doing select all.

angular.module("app", []).controller("ctrl", function($scope){    $scope.options = [    {value:'Option1', selected:true},     {value:'Option2', selected:false}  ];    $scope.toggleAll = function() {     var toggleStatus = !$scope.isAllSelected;     angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });     }    $scope.optionToggled = function(){    $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })  }});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script><div ng-app="app" ng-controller="ctrl"><form id="selectionForm">    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all    <br>     <div ng-repeat = "option in options">        <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}     </div></form>  {{options}} </div>

select all checkboxes in angularJS

You want a function that is launched with the ng-click event on the checkbox. This will also unselect all checkbox too. It iterates through all items, changing the state of each.

   <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
   <tr ng-repeat="item in items">
        <td>
            {{item.name}}
        </td>
        <td>
             <input type="checkbox" ng-model="item.Selected" />
        </td>
    </tr>  

The controller could look something like this:

angular.module("myApp", [])
    .controller("checkboxCtrl", function($scope) {

    $scope.Items = [{
        name: "one"
    }, {
        name: "two"
    }, {
        name: "three"
    }];

    $scope.checkAll = function () {
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectAll;
        });
    };   
});

how to select only one checkbox at a time in Angular 9 with ngFor

This happening because, you're using same ngModel for all checkbox, that will bind the value(boolean) to all inputs automatically, which is resulting selecting all. To fix this, you should be using separate ngModel for each checkbox.

Example: link

// component.
ChooseCriteria = [
  { category: "Fruits", id: 1, checked: false },
  { category: "Animals", id: 2, checked: false }
];

<div>
 <span>{{ ChooseCriteria | json }}</span>
 <label for=" Option" *ngFor="let mc of ChooseCriteria" class="form-control" > 
  <input type="checkbox" name="Option" [(ngModel)]="mc.checked"> 
  {{ mc.category }}
 </label>
</div> 

AngularJs checkbox select all

You can merge the two checkboxes into one performing both operations i.e. select all and calculate balance on the change on one checkbox. In the html:

<input type="checkbox" ng-change="checkAllAndCalBalance()" ng-model="params.checkbox[0]" 
class="ng-valid ng-dirty ng-valid-parse ng-touched ng-empty" style="">

And in the logic create a new function checkAllAndCalBalance to do both the tasks. As the ng-model of the other checkbox is not there anymore, you have to set its value manually in your logic so that the computations depending on trx.marked_reconciled won't get affected:

 $scope.checkAll = function () { angular.forEach($scope.records, function (v) 
{ $scope.params.checkbox[v.id] = $scope.params.checkbox[0]; }); };

$scope.calBalance = function () {
                if (!$scope.trans) {
                    return;
                }
                var current = 0;
                var statement_mth = new Date($scope.item.reconcile_date).getMonth();
                angular.forEach($scope.trans.trans, function (trx) {
                    var reconcile_mth = new Date(trx.reconcile_on).getMonth();
                    if (trx.marked_reconciled && ((statement_mth == reconcile_mth) || !trx.reconcile_on)) {
                        if (trx.entry == 'debit') {
                            current += parseFloat(trx.amount);
                        } else if (trx.entry == 'credit') {
                            current -= parseFloat(trx.amount);
                        }
                    }
                });
    };

$scope.checkAllAndCalBalance = function(){
    //as not specified in ng-model, setting the value of trx.marked_reconciled manually in logic
    $scope.trx.marked_reconciled=$scope.params.checkbox[0];
    //select all  
    $scope.checkAll();
    //calculate balance
    $scope.calBalance();
};

Hope this helps.

I want user to select only one checkbox instead of multiple? How can I approach in angular?

As mentioned in the comments, this is what radio buttons do, but if you need to implement the same functionality using checkboxes, you can achieve that like the following:

• Define a selectedIndex variable, and assign to it the index of the last checked checkbox.
• Bind the ngModel of the checkboxes to [ngModel]="selectedIndex === index" where the index is the index of the checkbox within the *ngFor loop.

<div class="form-check" *ngFor="let product of DisplayProductList; let index = index">
  <label class="form-check-label text-break">
    <input class="form-check-input" type="checkbox" [ngModel]="selectedIndex === index"
        (change)="changeSelection($event, index)" />
    {{ product.template_name }}
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
</label>
</div>

selectedIndex: number;

changeSelection(event, index) {
  this.selectedIndex = event.target.checked ? index : undefined;

  // do your logic here...
}

Select all if all checkboxes are selected, angular js

Please take a look at this fork of your plunker: https://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o?p=preview

Two things:

1. It's a good practice to create an object to your view model (you can find it under the name model in the plunker $scope.model. This will solve 2 way data binding issues.

2. I have changed the ng-click to ng-change (this is not part of the solution though - its just more correct in my opinion).

Please let me know if you need more clarifications.

select all checkboxes with angular JS

You are missed the container divs with ng-controller and ng-app and angular.module.

user.select = $scope.selectAll is the correct variant.

https://jsfiddle.net/0vb4gapj/1/

How to select all and Unselect checkbox in Angular?

// Todo.ts
export class Todo {
  id: number;
  title: string;
  completed: boolean;
  selected: boolean;
}   

// todo-item.component.html
<div [ngClass]="setClasses()">
  <p>
    <input (change)="onToggle(todo)" type="checkbox" [checked]="todo.selected"/>
    {{ todo.title }}
    <button (click)="onDelete(todo)" class="del">x</button>
  </p>
</div>     

// todos.component.html
<app-add-todo (addTodo)="addTodo($event)"></app-add-todo>
<div>
  <button type="submit" value="Submit" class="btn action-button" (click)="checkAll()">Select All</button>
  <button type="submit" value="Submit" class="btn action-button" (click)="uncheckAll()">Deselect All</button>
  <button type="Reset" value="Submit" class="btn action-button" (click)="resetAll()">Reset</button>
</div>
<app-todo-item *ngFor="let todo of todos" [todo]="todo" (deleteTodo)="deleteTodo($event)">
</app-todo-item> 

// todos.component.css
.action-button {
    margin-right: 10px;
}  

// todos.component.ts
export class TodosComponent implements OnInit {
  todos: Todo[];

  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.todoService.getTodos().subscribe(todos => {
      this.todos = todos;
    });
  }

  deleteTodo(todo: Todo) {
    // Remove From UI
    this.todos = this.todos.filter(t => t.id !== todo.id);
    // Remove from server
    this.todoService.deleteTodo(todo).subscribe();
  }

  addTodo(todo: Todo) {
    this.todoService.addTodo(todo).subscribe(todo => {
      this.todos.push(todo);
    });
  }

  checkAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = true;
    }
  }

  uncheckAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = false;
    }
  }
}

Here I have introduced a new property to the todo object called selected and it is binded to the checked property of the input.

And I have added two methods named checkAll and uncheckAll to the component which handles select and unselect actions, which needs to get bind to the click event of your SelectAll and UnselectAll buttons.

Those methods will iterate through the todo list and change the value of the selected property based on the action performed and then the checkboxes will get checked and unchecked correspondly.

Check all check boxes in AngularJS

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

---

Related Topics