Source Code

Retrieve Multiple Checkbox Selected in Angularjs

Get all checked checkbox value in Angularjs

You can get the values from All the checkbox and pass from the controller in AngularJS using $scope varible.

Demo by live24u.com - Tutorial @ live24u.com

{{project.name}}
Selected Programming Languages:
{{name}}

Example : index.html


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href='font-awesome.css' rel="stylesheet" type="text/css"></link>
<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="ckbox" ng-controller="ckCtrl">

	<h3 style="text-align:center;">Retrieve Multiple Checkbox Selected in Angularjs</h3>
	<p style="text-align:center;font-family:Tahoma">Demo by live24u.com - Tutorial @ <a href="javascript:parent.window.location.href=''" style="color:turquoise">live24u.com</a></p> 

	<div class="check-box-ckbox">
		<div ng-repeat="project in projects">
			<div class="action-checkbox">
				<input id="{{project.name}}" type="checkbox" value="{{project.name}}" ng-checked="selection.indexOf(project.name) > -1" ng-click="toggleSelection(project.name)" />
				<label for="{{project.name}}"></label>
				{{project.name}}
			</div>
		</div>
	</div>
	<div class="ck-selected-products-ckbox">
	<span style="color:white;" class="ck-selected-product">Selected Programming Languages:<span>
		<div ng-repeat="name in selection" class="ck-selected-product">
		{{name}}
		</div>
	</div>
</div>
</body>
</html>

Example : App.js


var myApp = angular.module('myApp', []);
myApp.controller('ckCtrl', function ($scope) {
$scope.projects=[{name:'PHP', grade:25, lcode:'0015'},
{name:'Laravel', grade:30, lcode:'0041'},
{name:'Mgradento', grade:28, lcode:'0041'},
{name:'Mysql', grade:15, lcode:'0041'},
{name:'ASP.net', grade:28, lcode:'0041'},
{name:'HTML 5', grade:95, lcode:'0015'},
{name:'CSS', grade:50, lcode:'0015'},
{name:'Vuejs', grade:27, lcode:'0041'},
{name:'Angularjs', grade:40, lcode:'0015'},
{name:'NodeJS', grade:60, lcode:'0041'}];
	$scope.selection=[];
	$scope.toggleSelection = function toggleSelection(employeeName) {
	var idx = $scope.selection.indexOf(employeeName);

	if (idx > -1) {
	  $scope.selection.splice(idx, 1);
	}
	else {
	  $scope.selection.push(employeeName);
	}
  };
});

Example : style.css


<style type="text/css">
.ckbox
{
	width: 60%;
	margin-right: 19%;
	margin-left: 19%;
	background-color: #3E5B9A!important;
	border-color: #e2e2e2;
	border: 1px solid transparent;
	height: 380px;
	color:white;
}
.action-checkbox
{
	padding-left: 25%;
	margin-top: 50px;
	margin-bottom: 31px;
	line-height: 11px;
	display: inline;
	
}
.check-box-ckbox
{
	width: 150px;
	float: left;
	display: inline;
	margin-top: 31px;
	margin-left: 31px;
	border-style: dotted;
	padding-top: 11px;
	padding-bottom: 11px;
	
}
.ck-selected-products-ckbox
{
	margin-left: 201px;
	margin-top: 18%;
	margin-right:11px;
}
.ck-selected-product
{
	display:inline;
	margin-right:11px;
	font-size:16px;
	color:turquoise;
	font-family:Trebuchet MS;
}

input[type=checkbox] { display:none; } 
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } 
input[type=checkbox] + label:before { letter-spacing: 11px; } 

input[type=checkbox]:checked + label:before { content: "\f046";color:turquoise; } 
input[type=checkbox]:checked + label:before { letter-spacing: 6px; } 
</style>