ionic 复选框
作者:BlueNight
时间:2026-08-11
浏览:1
说白了,ionic 里的复选框(checkbox)和普通 HTML 复选框在用法上差别并不大,下面这个示例主要展示的,就是 ionic 复选框 ion-checkbox 的实际应用方式。 复选框标签 实例这个示例里的逻辑很直接:会根据复选框当前是否被选中来更新 checked 的值。checked
说白了,ionic 里的复选框(checkbox)和普通 HTML 复选框在用法上差别并不大,下面这个示例主要展示的,就是 ionic 复选框 ion-checkbox 的实际应用方式。

复选框标签
实例
这个示例里的逻辑很直接:会根据复选框当前是否被选中来更新 checked 的值。checked 为 true,表示已选中;为 false,则表示未选中。
HTML 代码
复选框
{{ item.text }}
Notifications
Push Notifications
Newsletter
Ja vaScript 代码
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: "Ja vaScript", checked: false }
];
$scope.pushNotificationChange = function() {
console.log('Push Notification Change', $scope.pushNotification.checked);
};
$scope.pushNotification = { checked: true };
$scope.emailNotification = 'Subscribed';
}])
css 代码:
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}
效果如下所示:
作者最新文章
联发科天玑9600 Pro首发2nm:能效与游戏渲染技术详解
2026-09-08 16:54
Excel基础操作指南:数据录入、格式设置、公式应用与打印预览
2026-09-02 12:47
动画制作全流程:从故事板到关键帧与最终输出
2026-09-02 11:12
砸了百亿的“神器”,正在很多人家里吃灰
2026-08-25 15:53
REDMI 17与Note 17系列通过认证 Note 17系列或7、8月发布
2026-08-25 14:28
上一篇:
ionic 单选框操作
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































