1、实例背景
ionic单选框用的是radio，设置样式item-radio
2、实例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ionic之单选框</title>
<link rel="stylesheet" href="../css/ionic.css" />
<script type="text/javascript" src="../js/angular/angular.js" ></script>
<script type="text/javascript" src="../js/ionic.js"></script>
<script type="text/javascript" src="../js/ionic-angular.js" ></script>
<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
</head>
<body>
<div class="content has-header">
<div class="list">
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
一月
</div>
<i class="radio-icon ion-checkmark "></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
二月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
三月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
四月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
五月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
六月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
七月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
八月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
九月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
十月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
十一月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
十二月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
十二月
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</div>
</body>
</html>
3、实例结果
![]()
分享到：
相关推荐
移动前端框架Ionic是一款用于构建高性能、跨平台的混合式移动应用的开源框架。它结合了AngularJS（一种JavaScript框架）的威力与Cordova/PhoneGap的原生功能，使开发者可以使用HTML、CSS和JavaScript来开发iOS、...
Ionic框架是一种先进的开源软件开发工具包，它利用Web技术来构建移动应用。它基于Apache Cordova，是一个完整的前端框架，用于构建跨平台的移动应用。Ionic使用Web技术如HTML、CSS和JavaScript，并利用AngularJS这样...
《全面解析Ionic2前端框架：实现高效Web应用开发》 Ionic2是基于Angular的开源框架，专为构建高性能的移动和桌面应用而设计。作为Ionic框架的第二代版本，它利用了TypeScript的强大功能，提供了丰富的组件库和高度...
《Ionic框架参考手册中文》是一份详尽的指南，专为使用Ionic框架进行移动应用开发的开发者提供。Ionic是一款开源的HTML5移动应用框架，它基于AngularJS，致力于构建高性能、跨平台的混合移动应用。通过利用Web技术如...
本文将深入探讨基于`Ionic2`框架开发的Android应用示例，该示例被称为"Ionic2 new demo"。这个项目旨在帮助开发者快速掌握`Ionic2`框架，了解如何利用其特性构建功能丰富的移动应用程序，特别是涉及到下拉框...
通过这个项目，你可以深入了解Ionic框架的用法，掌握移动应用开发的基本流程，并且能逐步完善和扩展这个简单的商城Demo，使之成为更完整的商业应用。不断实践和优化，将有助于你在移动开发领域建立起坚实的技术基础...
【Ionic手机框架模板】是移动应用开发领域中的一个重要资源，尤其对于那些希望使用Ionic框架构建高效、美观且功能丰富的手机应用程序的开发者来说。Ionic是一款基于Angular的开源框架，专为混合移动应用开发设计，它...
《Ionic Sublime Plugin：提升Ionic开发效率的利器》 在移动应用开发领域，Ionic框架以其强大的功能和跨平台兼容性，成为了许多开发者的选择。而Sublime Text作为一款广受欢迎的代码编辑器，拥有丰富的插件生态系统...
ion-select-autocomplete是一个用于Ionic应用的单选或多选框。使用方法下载或者clone项目，并添加下面的代码[removed][removed]In JS$scope.optionList = [ { label: 'India', value: 'IND' }, {...
IonicLab是一款强大的移动应用开发平台，专为基于Ionic框架构建混合移动应用的开发者设计。这个安装包是开发者们在无法通过官方渠道下载IonicLab时的重要资源，因为直接访问官方下载地址可能会受到网络限制。 Ionic...
本文将深入探讨使用Ionic框架进行混合式开发，特别是在Android平台上的实现。Ionic是一个开源的HTML5移动应用框架，它允许开发者使用Web技术（如HTML、CSS和JavaScript）来构建功能丰富的跨平台应用。 ### 1. 混合...
【Ionic项目实例详解】 本文将深入探讨一个名为“ddcanzuo”的完整Ionic项目实例，该实例已经过Cordova编译处理，适用于个人自学。在理解这个项目之前，我们需要先了解 Ionic 和 Cordova 这两个关键的技术框架。 *...
### ionic视频教程知识点概述 #### 一、Ionic框架简介 Ionic是一款开源的移动应用开发框架，基于HTML、CSS和JavaScript构建，允许开发者使用Web技术创建高性能的原生应用程序。Ionic与Angular框架紧密集成，因此被...
ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 复选框标签 实例 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， ...
本书作为Syncfusion的Succinctly系列电子书之一，由Syncfusion公司出版。该系列电子书提供了针对特定技术的深入且简洁的教程。读者可以通过Syncfusion官网下载本书，但需要完成一个注册表单。此外，本书的版权信息...
**标题解析：** "ionic-best-practices.pdf" 这个标题暗示了文件内容可能是关于Ionic框架的最佳实践指导，特别强调了“5”，这可能是指Ionic框架的第五个主要版本，即Ionic 5。最佳实践通常包括编码规范、设计模式、...
标题"ionic+phonegap 案例源码"表明这是一个使用了Ionic框架和PhoneGap工具开发的移动应用示例项目。Ionic是一个流行的开源HTML5移动应用框架，它允许开发者使用Web技术（如HTML, CSS, JavaScript）来构建原生感的...
《基于Ionic3构建的仿京东商城源码解析》 在移动应用开发领域，Ionic框架以其强大的功能和跨平台特性受到了广泛关注。本篇文章将深入探讨一个使用Ionic3开发的仿京东商城源码，这对于想要学习和掌握Ionic3技术的...
**Ionic购物车商城模板详解** 本文将深入探讨`Ionic`框架在构建购物车商城模板中的应用，以及如何利用这一强大的工具来创建一个功能完备、用户体验优秀的移动电子商务平台。`Ionic`是一个开源的HTML5移动应用框架，...