复选框

代码演示

Checkbox

默认复选

默认默认已选不可选

简单的栗子

我已阅读《协议链接》

组合

选项一

选项二

不可选

辅助文字内容

默认

用.checkbox-wrapper包裹，可以得到一个checkbox。


<label class="checkbox-wrapper" for="checkbox">
    <input type="checkbox" name="checkbox">默认
</label>
<label class="checkbox-wrapper" for="checkbox1">
    <input type="checkbox" id="checkbox1" checked>默认已选
</label>
<label class="checkbox-wrapper" >
	<input type="checkbox" name="checkbox" disabled >不可选
</label>
<br>
简单的栗子
<label class="checkbox-wrapper checkbox-right" >
    <input type="checkbox" name="checkbox" >  我已阅读<a>《协议链接》</a>
</label>
<br>

组合

已经为你封装好单选框的组合实例。结合列表组件。


<div class="list-ord">
	<label  for="c13" class="list-label-wrapper">
		<div class="list-item list-item-middel list-nowrap">
			<div class="list-content txt-nowrap ">
				<div class="list-title txt-nowrap">选项一</div>
			</div>
			<div class="list-extra">
				<label class="checkbox-wrapper checkbox-right" >
				    <input type="checkbox" name="checkbox" id="c13">
				</label>
			</div>
		</div>
	</label>
	<label  for="c3" class="list-label-wrapper">
		<div class="list-item list-item-middel list-nowrap">
			<div class="list-content txt-nowrap ">
				<div class="list-title txt-nowrap">选项二</div>
			</div>
			<div class="list-extra">
				<label class="checkbox-wrapper checkbox-right" >
				    <input type="checkbox" name="checkbox" id="c3">
				</label>
			</div>
		</div>
	</label>
	<label  for="c4" class="list-label-wrapper">
		<div class="list-item list-item-middel list-nowrap">
			<div class="list-icon icon-outline"></div>
			<div class="list-content ">
				<div class="list-title txt-weak">不可选</div>
				<div class="list-brief txt-nowrap">辅助文字内容</div>
			</div>
			<label class="checkbox-wrapper checkbox-right" >
			    <input type="checkbox" name="checkbox" id="c4" disabled>
			</label>
		</div>
	</label>	
</div>
<br>