Tutorial --

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

ionic Tutorial

ionic Tutorialionic Installationionic Create APP

ionic CSS

ionic Header and Footerionic Buttonionic Listionic Cardionic Form and Inputionic toggleionic checkboxionic Radio Buttonionic rangeionic selectionic tabionic Gridionic Colorionic Icon

ionic JavaScript

ionic ActionSheetionic Backdropionic Pull to Refreshionic Checkboxionic Radio Button Operationionic Toggle Operationionic Gesture Eventionic Header and Footerionic List Operationionic Loadingionic Modalionic Navigationionic Platformionic Popoverionic Popupionic Scrollionic Side Menuionic Slide Boxionic Spinnerionic Tabs Operation

ionic Pull to Refresh

ionic Radio Button Operation

ionic Checkbox

ionic checkbox is no different from ordinary HTML checkboxes. The following example demonstrates the application of ionic checkbox ion-checkbox.

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

---

Example

In the example, the checked value will be modified based on whether the checkbox is selected, true for selected, false for unselected.

HTML Code

<ion-header-bar class="bar-positive"> <h1 class="title">Checkbox</h1></ion-header-bar> <ion-content> <div class="list"> <ion-checkbox ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-checkbox> <div class="item"> <div ng-bind="devList | json"></div> </div> <div class="item item-divider"> Notifications </div> <ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()"> Push Notifications </ion-checkbox> <div class="item"> <div ng-bind="pushNotification | json"></div> </div> <ion-checkbox ng-model="emailNotification" ng-true-value="'Subscribed'" ng-false-value="'Unubscribed'"> Newsletter </ion-checkbox> <div class="item"> <div ng-bind="emailNotification | json"></div> </div> </div> </ion-content>

JavaScript Code

angular.module('starter', ['ionic']).run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); }});}).controller( 'actionsheetCtl',['$scope',function($scope){ $scope.devList = [ { text: "HTML5", checked: true }, { text: "CSS3", checked: false }, { text: "JavaScript", checked: false } ]; $scope.pushNotificationChange = function() { console.log('Push Notification Change', $scope.pushNotification.checked); }; $scope.pushNotification = { checked: true }; $scope.emailNotification = 'Subscribed';}])

CSS code:

body { cursor: url(''), auto;}

Try it »

The effect is shown below: