Angular Get Values Bind Multiple Checkbox Selected

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 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


<!DOCTYPE html>
<html ng-app="myApp">
<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">
	width: 60%;
	margin-right: 19%;
	margin-left: 19%;
	background-color: #3E5B9A!important;
	border-color: #e2e2e2;
	border: 1px solid transparent;
	height: 380px;
	padding-left: 25%;
	margin-top: 50px;
	margin-bottom: 31px;
	line-height: 11px;
	display: inline;
	width: 150px;
	float: left;
	display: inline;
	margin-top: 31px;
	margin-left: 31px;
	border-style: dotted;
	padding-top: 11px;
	padding-bottom: 11px;
	margin-left: 201px;
	margin-top: 18%;
	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; } 
<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 - Tutorial @ <a href="javascript:parent.window.location.href=''" style="color:turquoise"></a></p> 

	<div class="check-box-ckbox">
		<div ng-repeat="project in projects">
			<div class="action-checkbox">
				<input id="{{}}" type="checkbox" value="{{}}" ng-checked="selection.indexOf( > -1" ng-click="chkSelectionFunc(" />
				<label for="{{}}"></label>
	<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">


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

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

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

Add a Comment

Your email address will not be published. Required fields are marked *