How to Get Selected CheckBoxes Using AngularJs

Get Checked Checkboxes with AngularJS

In this blog, I would teach you two ways to get a list of selelected checkboxes using AngularJS with the click on a button. In another blog we would explain how to perform an action when a checkbox is checked (ng-change or ng-click event).

 

HTML
For the two methods, the html code remains the same as below:

 

<div ng-repeat="row in Skills" >
 <label>
   <input type="checkbox" ng-model="row.selected" >
   <span> {{row.Skill}} </span>
</label>
</div>
<button ng-click="GetSelected()">Get Selected</button>

 

AngularJS (Script 1)

$scope.selected = {};
$scope.DeleteSelected=function () {               
        angular.forEach($scope.selected, function(value, key) {
 console.log(key);
 console.log(value);   
 });
};

 

AngularJS (Script 2)

 

$scope.GetSelected=function() {       
   var selected = [];
   angular.forEach($scope.Skills, function(row) {
   if (row.selected) {          
  console.log(row.ID);
  console.log(row.Skill);
   }
   });
}

 

Both methods have been tested by me and works very fine. You could reach me by comment below if you have any challenge using the code.

 

Thanks for learning.