AngularJS : Retrieve Multiple Checkbox Selected Options

This post explains how to retrieve or bind multiple checkbox selected options from a checkbox list in AngularJS. This functionali...



This post explains how to retrieve or bind multiple checkbox selected options from a checkbox list in AngularJS. This functionality of retrieving the values of selected options in a checkbox list is required when you want to perform the same action only once, for the various options selected. For example, if you want to delete all the selected records in a table, you might want to facilitate the users with options to select records to be deleted via checkboxlist and delete all of them at once on clicking a button. 

Since this functionality is used often in web applications powered by AngularJS, you can make use of the code snippet below that will help you achieve it instantly. 

I have used sample json data to populate checkbox options initially. Normally this would come from any of your database if you are going for a dynamic application. In the sample demo, I had used lot of styling elements and 'font-awesome' icons to make it look clean, but did not include any of it in the tutorial and you can ignore them in your implementation.


index.html


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="panel" ng-controller="checkBoxController"> 
 <div ng-repeat="employee in employees">
  <div class="action-checkbox">
   <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
   <label for="{{employee.name}}"></label>
   {{employee.name}}
  </div>
 </div>
 <span style="color:white;" class="selected-item">Selected Items:<span>
 <div ng-repeat="name in selection" class="selected-item">
  {{name}}
 </div>
</div>
</body>
</html>

app.js


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

myApp.controller('checkBoxController', function ($scope) {
  $scope.employees=[{name:'John', age:25, gender:'boy'},
       {name:'Jessie', age:30, gender:'girl'},
       {name:'Johanna', age:28, gender:'girl'},
       {name:'Joy', age:15, gender:'girl'},
       {name:'Mary', age:28, gender:'girl'},
       {name:'Peter', age:95, gender:'boy'},
       {name:'Sebastian', age:50, gender:'boy'},
       {name:'Erika', age:27, gender:'girl'},
       {name:'Patrick', age:40, gender:'boy'},
       {name:'Samantha', age:60, gender:'girl'}];
  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(employeeName) {
     var idx = $scope.selection.indexOf(employeeName);

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
       $scope.selection.push(employeeName);
     }
   };
});

The above code is very simple and intuitive, if you know a little bit of AngularJS. However, let me provide step by step explanation on what has been done here,

1. First I am initiating angularjs using ng-app directive in html tag.

2. Then, I have placed the checkbox element within angularjs controller called 'checkBoxController'. So when this part of html loads, every line of code written within controller section in 'app.js' will execute.

3. In app.js, I have used sample employees json data to initiate the checkbox with values.

4. I have used ng-repeat angularjs directive, so that for each value in $scope.employees,  a checkbox option is created and the name of employee is bound as its value.

5. Here comes the important part, 'ng-click' event. Whenever any checkbox option is checked or un-checked by the user, this event will be fired, hence calling the toggleSelection method in app.js file.

6. 'toggleSelection' method takes the employee name as argument and pushes it to an array - $scope.selection. If the checkbox is unchecked, it removes it from $scope.selection array.

7. Hence, $scope.selection represents a list of selected options at any point of time and can be used to perform other operations (such as deleting & updating records, etc.)

8. For easy understanding I have displayed the selected options in a div.



If you like my articles and find them useful, do signup for newsletter in the box below to get my articles delivered directly to your inbox. Thanks for reading!

Subscribe to GET LATEST ARTICLES!


Related

AngularJS 8140796381521039738

Post a Comment

  1. Exactly what was looking for, thanks

    ReplyDelete
  2. How add buttons "check all" and remove some items from checked items ( ng-repeat="name in selection" {{name}})

    ReplyDelete
  3. Thanks for this small tutorial. How do we store those checked employee names in local storage and retrieve them when needed?

    ReplyDelete
  4. Download link is not working please fix it

    ReplyDelete
  5. thank you.
    may you provide multiple check box unselect list in angularjs.
    on my id- bhardwaj.manish11@gmail.com

    ReplyDelete
  6. hi, Great article. What if I want to add object and not item? Thank you for your time

    ReplyDelete
  7. Its working, but i have some problem. I have one form, inside that form 4 checkbox is there, like employee name in this tutorial. I need to validate that at-least one check box should be clicked. Else my add button should be disabled. Pls help me.

    ReplyDelete
  8. Nice, its working perfect. But how to add check all option for this

    ReplyDelete
  9. You are amazing. Thanks for this. It was exactly what I needed. Everything else I previously found was way too complex. Great job!

    ReplyDelete
  10. Hi if both checkbox and radio button are present means how to push ?

    ReplyDelete
  11. Very Nice Tutorial You saved our day!!

    ReplyDelete
  12. It's an awesome guide. Helped me fully to achieve my requirement. Thanks a lot! :)

    ReplyDelete
  13. Best Article i have read today. Well Informed and well written. Everyhing has organised and explained correctly.

    Keep Updating these types of articles. There are plenty of websites who also provides the articles on Job Postings and Government Job Postings.

    You can refer them here GovIntern.com

    ReplyDelete

emo-but-icon

SUBSCRIBE


item