July 16, 2018

Angular Get Values Bind Multiple Checkbox Selected

By admin AngularJs, Technology 0 Comments

Angular Get Values Bind Multiple Checkbox Selected

Today, We want to share with you Angular Get Values Bind Multiple Checkbox Selected.
In this post we will show you Retrieve Multiple Checkbox Selected in Angularjs, hear for Check uncheck all Multiple Checkboxes with AngularJS we will give you demo and example for implement.
In this post, we will learn about Angularjs Bind Multi-Checkbox with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Retrieve Multiple Checkbox Selected in Angularjs

READ : Create simple VueJS Modal popup Component using Bootstrap CSS

get multiple checked checkbox value in angularjs

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<link href='font-awesome.css' rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<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>
</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 infinityknow.com - Tutorial @ <a href="javascript:parent.window.location.href=''" style="color:turquoise">infinityknow.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="chkSelectionFunc(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>

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.chkSelectionFunc = function chkSelectionFunc(Languages_name) {
	    var idx = $scope.selection.indexOf(Languages_name);

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

Here infinityknow Team has explained with example, how to use simple AngularJS to get all the list multiple selected Text in check and Value of HTML Multiple check-box-ckbox Select ListBox when Button is clicked all the value using ng-click directive.

READ : Angular Dynamic Counter Update value

Example 1

Example 2

Post Views: 713