Radio 单选
使用方法
radio的主要节点由label、input和u构成，构建好节点之后，对label追加ax-radio类即可，如果需要使用标题可追加i标签。
需要特别说明的是对input追加checking属性可实现中间状态。基本结构如下：
<label class="ax-radio"><input type="radio"><u></u><i>文字</i></label>
<label class="ax-radio"><input name="pen" value="0" checked type="radio"><u></u><i>军事类</i></label>
<label class="ax-radio"><input name="pen" value="0" type="radio"><u></u><i>人物志类</i></label>
<label class="ax-radio"><input name="pen" value="0" type="radio"><u></u><i>娱乐类</i></label>
<label class="ax-radio"><input name="pen" value="0" type="radio" checking><u></u><i>财经类</i></label>
块分布
对label追加ax-chera类，将radio和对应的文字装入即可。基本结构如下：
<label class="ax-chera"><input name="" value="" type="radio"><span>文字</span></label>
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-chera"><input name="pen02" value="0" checked type="radio"><u></u><i>是</i></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera"><input name="pen02" value="0" type="radio"><u></u><i>否</i></label></div>
</div>
占满均分布局
以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-6"><label class="ax-radio"><input name="fix-clock" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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-radio"><input name="fix-bike" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><u></u><i>文学类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><u></u><i>小说类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><u></u><i>教材类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><u></u><i>动漫类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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="radio"><u></u><i>军事类</i></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="radio"><u></u><i>人物志类</i></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="radio"><u></u><i>娱乐类</i></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="radio"><u></u><i>其他</i></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-12"><label class="ax-radio"><input name="fix-draw" value="0" checked="" type="radio"><u></u><i>阅读《XXX使用协议》</i></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0" disabled="" type="radio"><u></u><i>阅读《XXX使用协议》</i></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-radio"><input name="fix-long" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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-radio"><input name="fix-cow" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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="radio"><u></u><i>军事类</i></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="radio"><u></u><i>人物志类</i></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="radio"><u></u><i>娱乐类</i></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="radio"><u></u><i>其他</i></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-12"><label class="ax-radio"><input name="fix-big" value="0" checked="" type="radio"><u></u><i>阅读《XXX使用协议》300px</i></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0" disabled="" type="radio"><u></u><i>阅读《XXX使用协议》300px</i></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-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><u></u><i>军事类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><u></u><i>人物志类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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="radio"><u></u><i>军事类</i></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="radio"><u></u><i>人物志类</i></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="radio"><u></u><i>娱乐类</i></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="radio"><u></u><i>其他</i></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-12"><label class="ax-radio"><input name="fix-paper" value="0" checked="" type="radio"><u></u><i>阅读《XXX使用协议》</i></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0" disabled="" type="radio"><u></u><i>阅读《XXX使用协议》</i></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-radio"><input name="free-apple" value="0" checked="" type="radio"><u></u><i>军事类</i></label>
<label class="ax-radio"><input name="free-apple" value="1" type="radio"><u></u><i>人物志类</i></label>
<label class="ax-radio"><input name="free-apple" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label>
<label class="ax-radio"><input name="free-apple-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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-radio"><input name="free-orange" value="0" checked="" type="radio"><u></u><i>军事类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>文学类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>人物志类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>小说类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>教材类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>动漫类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>历史类</i></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><u></u><i>人文类</i></label>
<label class="ax-radio"><input name="free-orange" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label>
<label class="ax-radio"><input name="free-orange-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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="radio"><u></u><i>军事类</i></label>
<label class="ax-chera"><input name="free-girl" value="1" type="radio"><u></u><i>人物志类</i></label>
<label class="ax-chera"><input name="free-girl" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label>
<label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></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-radio"><input name="free-agree" value="0" checked="" type="radio"><u></u><i>阅读《XXX使用协议》</i></label><label class="ax-radio"><input name="free-agree" value="0" type="radio"><u></u><i>阅读《XXX使用协议》</i></label>
</div>
</div>
</div>
</div>
不同尺寸
本框架的单选默认高是38px(ax-md)，对ax-radio或ax-chera追加尺寸类实现不同大小效果以适应不同行高。
高22px的ax-xs。
<div style="line-height:22px;">
<label class="ax-radio ax-xs"><input name="pen03" value="0" checked type="radio"><u></u><i>是</i></label>
<label class="ax-radio ax-xs"><input name="pen03" value="0" type="radio"><u></u><i>否</i></label>
</div>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="radio"><u></u><i>是</i></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="radio"><u></u><i>否</i></label></div>
</div>
高28px的ax-sm。
<label class="ax-radio ax-sm"><input name="pen05" value="0" checked type="radio"><u></u><i>是</i></label>
<label class="ax-radio ax-sm"><input name="pen05" value="0" type="radio"><u></u><i>否</i></label>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="radio"><u></u><i>是</i></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="radio"><u></u><i>否</i></label></div>
</div>
高48px的ax-lg。
<label class="ax-radio ax-lg"><input name="pen07" value="0" checked type="radio"><u></u><i>是</i></label>
<label class="ax-radio ax-lg"><input name="pen07" value="0" type="radio"><u></u><i>否</i></label>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="radio"><u></u><i>是</i></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="radio"><u></u><i>否</i></label></div>
</div>
插件使用方法
以上的radio方法是最原始、简单的创建方法，对于管理系统开发者而言大概认为不够好用的。我们通常需要对radio进行赋值、清空、事件等操作，通过实例化之后更便于管理。
对于radio和checkbox可共用axCheckbox组件，通过type参数区分两者。关于axCheckbox详细可点击这里。
插件运行方式有三种：
- ax*属性：对div标签使用
axCheckbox属性即可按默认参数运行插件（此div将作为wrapper包裹radio）。 - js实例：通过
new axCheckbox('#ID')方式创建实例运行。 - js实例：通过
new axCheckbox('')方式创建内存实例运行。
父层创建实例：
用ID创建实例：
创建内存实例：
F12打开控制台看看，radio节点将被新创建的ax-form-wrapper包裹。
-
<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" axCheckbox='type:"radio",name:"read",children:[{value:"military",label:"军事类"},{value:"figure",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">用ID创建实例：</div> <div class="ax-form-con"> <div class="ax-form-input" id="radio"></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">F12打开控制台看看，radio节点将被新创建的ax-form-wrapper包裹。</div> </div> </div> </div> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; new axCheckbox('#radio', { type: 'radio', name: 'read2', children: data }); console.log(new axCheckbox('', { type: 'radio', children: data }) );