ionic.css界面组件：表单-复选按钮

和开关一样，复选按钮也是基于HTML的checkbox input实现的。使用如下的HTML模板声明复选按钮。用法：

<any class="item-input">
    <any class="checkbox">
        <input type="checkbox">
    </any>
</any>

复选按钮的配色方案样式为：.checkbox-{color}。

<label class="checkbox checkbox-dark" >
    <input type="checkbox" checked>
</label>

将上代码放在 .item-checkbox里面，可定定复选框的位置：

//ionic.css源码
.item-checkbox .checkbox {
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  z-index: 3;
  margin-top: -21px; }

综上实例：

<div class="scroll-content has-header">
	<ul class="list">
	
		<li class="item item-checkbox item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>Shopping</h2>
			<p>Due tommorow</p>
                        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
			
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox" checked>
			</label>
			<h2>Moving house checklist</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
		
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>Holiday destinations</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
		
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>App ideas</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
	</ul>
</div>
<div class="bar bar-footer bar-positive">
	<div class="button-bar">
		<a class="button">All</a>
		<a class="button">Done</a>
		<a class="button">Completed</a>
	</div>
</div>