AngularJS


<!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 pakainfo.com - Tutorial @ <a href="javascript:parent.window.location.href=''" style="color:turquoise">pakainfo.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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl508605'},{'dcenter':'p3'},{'cp_id':'10178443'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></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>