v3首页
核心
实例
资源
关于
v1.0

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包裹。
HTML JS 
  •                                         <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
                                        })
                                        );