# ionic Toggle(切换开关)
切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。
切换开关可以使用 toggle-assertive 来指定颜色。
```
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
```
该实例有是多个切换开关列表。注意,每个选项的 item 类后需要添加 item-toggle 类。
```
<ul class="list">
<li class="item item-toggle">
HTML5
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
...
</ul>
```
运行效果如下:
![](https://box.kancloud.cn/2015-12-30_56834d8e2362d.png)
## ionic checkbox(复选框)
ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大,只是样式上有所不同。
以下实例颜色了多个复选框的列表。
注意,每个选项的 item 类后需要添加 item-checkbox 类。
复选框可以使用 checkbox-assertive 来指定颜色。
```
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
...
</ul>
```
运行效果如下:
![](https://box.kancloud.cn/2015-12-30_56834d8e336b4.png)
- ionic 入门
- ionic 简介
- ionic 安装
- ionic 创建 APP
- ionic CSS
- ionic 头部与底部
- ionic 按钮
- ionic 列表
- ionic 卡片
- ionic 表单和输入框
- ionic Toggle(切换开关)
- ionic 单选框
- ionic Range
- ionic select
- ionic tab(选项卡)
- ionic 网格(Grid)
- ionic 颜色
- ionic icon(图标)
- ionic JavaScript
- ionic 上拉菜单(ActionSheet)
- ionic 背景层
- ionic 下拉刷新
- ionic 复选框
- ionic 单选框操作
- ionic 切换开关操作
- ionic 手势事件
- ionic 头部和底部
- ionic 列表操作
- ionic 加载动作
- ionic 模型
- ionic 导航
- ionic 平台
- ionic 浮动框
- ionic 对话框
- ionic 滚动条
- ionic 侧栏菜单
- ionic 滑动框
- ionic 加载动画
- ionic 选项卡栏操作