Check and uncheck all checkbox using Angularjs

Check and uncheck all checkbox using Angularjs

In this post we will give you information about Check and uncheck all checkbox using Angularjs. Hear we will give you detail about Check and uncheck all checkbox using AngularjsAnd how to use it also give you demo for it if it is necessary.

In this post, i would like to show you how to check uncheck checkboxes in angularjs. we mostly require to do check unselect all checkbox when we are doing multiple select items, multiple delete item etc task on your web app.

Here, i will show you two way to make all checkbox checked and unchecked on button click event in angular js. i also give you demo. so you can check also there. we will use ng-model and ng-checked for doing simple check uncheck toggle event. in another example we will use ng-checked and ng-click. So let’s see both example.

Example 1:

<!doctype html>

<html>

<head>

<title>Check and uncheck all checkbox using Angularjs - ItSolutionStuff.com</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app='myapp'>

<div ng-controller="myCtrl">

<input type='checkbox' value='' ng-model='checkAll' >Check/Uncheck All<br/>

<input type='checkbox' ng-checked="checkAll" >AngularJS<br/>

<input type='checkbox' ng-checked="checkAll">VueJS<br/>

<input type='checkbox' ng-checked="checkAll">JQuery<br/>

<input type='checkbox' ng-checked="checkAll" >PHP<br/>

</div>

</body>

<script type="text/javascript">

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

app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

}]);

</script>

</html>

Example 2:

Also see:AngularJS Check Checkbox is checked or not

<!doctype html>

<html>

<head>

<title>Check and uncheck all checkbox using Angularjs - ItSolutionStuff.com</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app='myapp'>

<div ng-controller="myCtrl">

<input type='button' id='but_checkall' value='Check all' ng-click='checkAll()'>

<input type='button' id='but_uncheckall' value='Uncheck all' ng-click='uncheckAll()'>

<br/>

<input type='checkbox' ng-checked="checkall" >AngularJS<br/>

<input type='checkbox' ng-checked="checkall">VueJS<br/>

<input type='checkbox' ng-checked="checkall">JQuery<br/>

<input type='checkbox' ng-checked="checkall" >Laravel<br/>

</div>

</body>

<script type="text/javascript">

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

app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.checkAll = function(){

$scope.checkall = true;

}

$scope.uncheckAll = function(){

$scope.checkall = false;

}

}]);

</script>

</html>

I hope it can help you…

Hope this code and post will helped you for implement Check and uncheck all checkbox using Angularjs. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

7  +  2  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US