Checkbox 复选
使用方法
对label追加ax-checkbox类，将radio和对应的文字装入即可。基本结构如下：
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>文字</span></label>
块分布
对label追加ax-chera类，将checkbox和对应的文字装入即可。基本结构如下：
<label class="ax-chera"><input name="" value="0" type="checkbox"><span>文字</span></label>
占满均分布局
以ax-flex-block作为外围可实现占满平均布局。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
复选：
复选：
复选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>文学类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>小说类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>教材类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>动漫类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选风格：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-draw" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
自定义宽度均分布局
对外围标签设定固定宽度，单选项将在此宽度内平均分布。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div style="width:400px;">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
复选(定宽400px)：
单选(定宽600px)：
复选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选(定宽400px)：</div>
<div style="width:400px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选(定宽600px)：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选风格：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="1" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-big" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
表单定宽均分布局
如果表单中还有其他输入控件，可以使用ax-form-input来统一外围宽度，宽度是460px。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
</div>
复选：
复选风格：
姓名：
评论内容：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选风格：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="1" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论内容：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-paper" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
</div>
自由布局
根据外围宽度自由填充单选项，不过由于单选项长度不一而导致视觉上不整齐。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label>
<label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label>
</div>
</div>
</div>
</div>
复选：
复选：
复选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-checkbox"><input name="free-apple" value="0" checked="" type="checkbox"><span>军事类</span></label>
<label class="ax-checkbox"><input name="free-apple" value="1" type="checkbox"><span>人物志类</span></label>
<label class="ax-checkbox"><input name="free-apple" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
<label class="ax-checkbox"><input name="free-apple-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选：</div>
<div class="ax-flex-block"><label class="ax-checkbox"><input name="free-orange" value="0" checked="" type="checkbox"><span>军事类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>文学类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>人物志类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>小说类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>教材类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>动漫类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>历史类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>人文类</span></label>
<label class="ax-checkbox"><input name="free-orange" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
<label class="ax-checkbox"><input name="free-orange-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">复选风格：</div>
<div class="ax-flex-block">
<label class="ax-chera"><input name="free-girl" value="0" checked="" type="checkbox"><span>军事类</span></label>
<label class="ax-chera"><input name="free-girl" value="1" type="checkbox"><span>人物志类</span></label>
<label class="ax-chera"><input name="free-girl" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
<label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label>
</div>
</div>
</div>
</div>
复选开关
对label追加ax-switch类即可。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="" value="0" type="checkbox" checked=""><span></span></label></div>
</div>
</div>
开关已开：
开关未开：
开关禁止：
开关禁止(已选择)：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关已开：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox" checked=""><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关未开：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox"><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关禁止：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" disabled="" type="checkbox"><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关禁止(已选择)：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" checked="" disabled="" type="checkbox"><span></span></label></div>
</div>
</div>
不同尺寸
本框架的复选默认高是38px(ax-md)，对ax-checkbox或ax-chera追加尺寸类实现不同大小效果以适应不同行高。
高22px的ax-xs。
<div style="line-height:22px;">
<label class="ax-checkbox ax-xs"><input name="pen03" value="0" checked type="checkbox"><span>军事类</span></label>
<label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><span>人物志类</span></label>
<label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><span>娱乐类</span></label>
</div>
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><span>娱乐类</span></label></div>
</div>
<label class="ax-switch ax-xs"><input name="check01" value="0" type="checkbox" checked><span></span></label>
高28px的ax-sm。
<label class="ax-checkbox ax-sm"><input name="pen05" value="0" checked type="checkbox"><span>军事类</span></label>
<label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><span>人物志类</span></label>
<label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><span>娱乐类</span></label>
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><span>娱乐类</span></label></div>
</div>
<label class="ax-switch ax-sm"><input name="check02" value="0" type="checkbox" checked><span></span></label>
高48px的ax-lg。
<label class="ax-checkbox ax-lg"><input name="pen07" value="0" checked type="checkbox"><span>军事类</span></label>
<label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><span>人物志类</span></label>
<label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><span>娱乐类</span></label>
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="checkbox"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><span>娱乐类</span></label></div>
</div>
<label class="ax-switch ax-lg"><input name="check03" value="0" type="checkbox" checked><span></span></label>