w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script Angularjs
Select all and Deselect all checkboxes in angularjs

Select all and Deselect all checkboxes in angularjs

W3TWEAKS by W3TWEAKS
October 22, 2021
in Angularjs
0

This tutorial will explain how to achieve check all and uncheck all checkbox using angularjs and listing all checked values in the page. Find the demo and download the source code at the end of the tutorial.

Let’s start our tutorial

You might also like

Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

October 27, 2020
0
Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

November 26, 2019
0

Find the folder structure

Select all and Deselect all checkboxes in angularjs 1

Select all and Unselect all checkbox

Create index.html and include the below code

<html>
    <head>
        <title>Check and Uncheck in check box in angularjs</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
        <script src="js/controller.js"></script>
    </head>
    <body ng-app="appModule" ng-controller="mainController">
        <div ui-view></div>
    </body>
</html>

In above code you can find <div ui-view></div> and controller.js and include the angular dependency.

<div ui-view></div> will initiate the default page which is defined in controller.js.

In controller file include the below code

var app = angular.module('appModule',['ui.router']);

app.config(function($stateProvider){
    $stateProvider.state('home',{
        url:'/',
        templateUrl:'templates/mainPage.html'
    });
});

app.controller('mainController',['$scope','$state',function($scope,$state){
    $state.go("home");
    $scope.allOption = "All";
    var modelScope = {
            "checkboxModel" : "checkboxModel",
            "selectedItems" : "selectedItems"
        };
    $scope.data = ["checkBox1","checkBox2","checkBox3"];
    
    $scope.checkboxModel = [];
    $scope.selectedItems = [];
    
    $scope.onClickFn = function(val){
        if(val == $scope.allOption)
            resultsFnAll();
        else
            addorRemoveItems(val);
    };
    
    function addorRemoveItems(val){
        if($scope[modelScope.checkboxModel][val]){
            $scope[modelScope.selectedItems].push(val);
        }else if(!$scope[modelScope.checkboxModel][val]){
            $scope[modelScope.selectedItems].splice($scope[modelScope.selectedItems].indexOf(val), 1);
        };
            
        if($scope[modelScope.selectedItems].length >= ($scope.data.length))
            $scope[modelScope.checkboxModel][$scope.allOption] = true;
        else
            $scope[modelScope.checkboxModel][$scope.allOption] = false;
    };
    function resultsFnAll(){
        var allVal = $scope[modelScope.checkboxModel][$scope.allOption];
        if(allVal)
            $scope[modelScope.selectedItems] = angular.copy($scope.data);
        else
            $scope[modelScope.selectedItems] = [];
        
        for (property in $scope["data"]) {            
            $scope[modelScope.checkboxModel][$scope["data"][property]] = allVal;
        };
    };
}]);

Include the below code in mainPage.html

<div ng-controller="mainController">
    <ul class="list-group">
        <li><input type="checkbox" ng-change="onClickFn(allOption)" ng-model="checkboxModel[allOption]" checked="checked"> {{allOption}}</li>
        <li ng-repeat="item in data">
            <input type="checkbox" ng-change="onClickFn(item)" ng-model="checkboxModel[item]" checked="checked"> {{item}}
        </li>
    </ul>

    <h2>Selected Value</h2>
    <li ng-repeat="val in selectedItems">{{val}}</li>
</div>

Demo

Tags: AngularjsAngularJS TutorialsCheckcheckboxCheckboxesdeselectgetselectUncheckunselectvalue
Previous Post

Twitter oAuth login api using php

Next Post

Create Facebook Messenger Chatbot using Node Js

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

by W3TWEAKS
October 27, 2020
0
0

This tutorial will explain how to get or iterate the JavaScript Object keys / Properties using AngularJs ngRepeat. It is...

Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

by W3TWEAKS
November 26, 2019
0
0

In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we...

Angularjs and JSON list infinite scroll

Angularjs and JSON list infinite scroll

by Vetrivel Pandian
September 19, 2019
0
0

JSON is more better way to transmitting the data in server to client. When you have develop large data application,...

Angularjs Jasmine Service Dependency Injection

Angularjs Jasmine Service Dependency Injection

by W3TWEAKS
November 26, 2019
0
0

This tutorial will explain how to write the Jasmine unit test case for angularjs service dependency injection. End of the...

Next Post
Create Facebook Messenger Chatbot using Node Js

Create Facebook Messenger Chatbot using Node Js

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube