Ionic – How to do Check All with Ion-Checkbox

This blog represents code sample to achieve “Check all” or “Select all” using ION-Checkbox.

AngularJS/Ionic Controller Code to Check All

Say, you have a list of contacts (name) with check boxes. What you want is to achieve “check all” when you check one checkbox. $scope.allcontacts is a temporary object to capture the checkbox checked value.

$scope.allcontacts = {};
$scope.allcontacts.checked = false;
$scope.checkAll = function() {
      if ($scope.allcontacts.checked) {
        $scope.allcontacts.checked = true;
      } else {
        $scope.allcontacts.checked = false;
      }
    for (var i=0; i < $scope.contacts.length; i++) {
      $scope.contacts[i].checked = $scope.allcontacts.checked;
    };
}; 

HTML Code including Ion-Checkbox to Achieve “Check All”

<ion-list>
<ion-checkbox class="item-checkbox-right" ng-model="allcontacts.checked" ng-checked="allcontacts.checked" ng-click="checkAll()">
        All Contacts
      </ion-checkbox>
      <ion-checkbox ng-repeat="contact in contacts"
                    ng-model="contact.checked"
                    ng-checked="contact.checked" class="item-checkbox-right">
        <h2>{{contact.name}}</h2>
      </ion-checkbox>
</ion-list>
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago