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

Checkbox 复选

使用方法

checkbox的主要节点由label、input和u构成，构建好节点之后，对label追加ax-checkbox类即可，如果需要使用标题可追加i标签。

需要特别说明的是对input追加checking属性可实现中间状态。基本结构如下：

                                <label class="ax-checkbox"><input type="checkbox"><u></u><i>文字</i></label>
                            
                                <label class="ax-checkbox"><input name="pen" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox"><u></u><i>娱乐类</i></label>
                                <label class="ax-checkbox"><input name="pen" value="0" type="checkbox" checking><u></u><i>财经类</i></label>

块分布

对label使用ax-chera类即可。基本结构如下：

                                    <div class="ax-row">
                                        <div class="ax-col ax-col-8"><label class="ax-chera"><input name="pen02" value="0" checked type="checkbox"><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="pen02" value="0" type="checkbox"><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="pen02" value="0" type="checkbox"><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-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><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-checkbox"><input name="fix-bike" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>文学类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>小说类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>教材类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><u></u><i>动漫类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike-x" value="3" checked="" disabled="" type="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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-24"><label class="ax-checkbox"><input name="fix-draw" value="0" checked="" type="checkbox"><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-checkbox"><input name="fix-long" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long-x" value="3" checked="" disabled="" type="checkbox"><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-checkbox"><input name="fix-cow" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                    <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow-x" value="3" checked="" disabled="" type="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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-24"><label class="ax-checkbox"><input name="fix-big" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</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-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><u></u><i>人物志类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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="checkbox"><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-24"><label class="ax-checkbox"><input name="fix-paper" value="0" checked="" type="checkbox"><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-checkbox"><input name="free-apple" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                    <label class="ax-checkbox"><input name="free-apple-x" value="3" checked="" disabled="" type="checkbox"><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-checkbox"><input name="free-orange" value="0" checked="" type="checkbox"><u></u><i>军事类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>文学类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>小说类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>教材类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>动漫类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>历史类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><u></u><i>人文类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                <label class="ax-checkbox"><input name="free-orange-x" value="3" checked="" disabled="" type="checkbox"><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="checkbox"><u></u><i>军事类</i></label>
                                                <label class="ax-chera"><input name="free-girl" value="1" type="checkbox"><u></u><i>人物志类</i></label>
                                                <label class="ax-chera"><input name="free-girl" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label>
                                                <label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="checkbox"><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-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><u></u><i>阅读《XXX使用协议》</i></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

复选开关

保持原有dom结构，对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="check-s" value="0" type="checkbox" checked=""><u></u></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"><u></u></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"><u></u></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"><u></u></label></div>
                                </div>
                            </div>

如果需要对开关使用标题，可追加i标签，放在label的子节点下方即可；根据需要可加在最前面也可在最后面。默认行内布局，如果需要左右布局请配合使用弹性布局样式。

                                <label class="ax-switch"><input name="check-s" value="0" type="checkbox" checked=""><u></u><i>是否党员</i></label>

                                <hr/>

                                <label class="ax-switch"><i>是否党员：</i><input name="check-s" value="0" type="checkbox"><u></u></label>

                                <hr/>

                                <label class="ax-switch ax-row"><input name="check-s" value="0" type="checkbox"><u></u><i class="ax-col ax-align-right">是否党员</i></label>
                                
                                <hr/>

                                <label class="ax-switch ax-row"><i class="ax-col">是否党员：</i><input name="check-s" value="0" type="checkbox"><u></u></label>

不同尺寸

本框架的复选默认高是38px(ax-md)，对ax-checkbox、ax-chera或ax-switch追加尺寸类实现不同大小效果以适应不同行高。

高22px的ax-xs。

                            <div style="line-height:22px;">
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><u></u><i>娱乐类</i></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"><u></u><i>军事类</i></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"><u></u><i>人物志类</i></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"><u></u><i>娱乐类</i></label></div>
                            </div>
                            <label class="ax-switch ax-xs"><input name="check01" value="0" type="checkbox" checked><u></u></label>

高28px的ax-sm。

                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><u></u><i>娱乐类</i></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"><u></u><i>军事类</i></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"><u></u><i>人物志类</i></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"><u></u><i>娱乐类</i></label></div>
                                </div>
                                <label class="ax-switch ax-sm"><input name="check02" value="0" type="checkbox" checked><u></u></label>

高48px的ax-lg。

                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" checked type="checkbox"><u></u><i>军事类</i></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><u></u><i>人物志类</i></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><u></u><i>娱乐类</i></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"><u></u><i>军事类</i></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"><u></u><i>人物志类</i></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"><u></u><i>娱乐类</i></label></div>
                                </div>
                                <label class="ax-switch ax-lg"><input name="check03" value="0" type="checkbox" checked><u></u></label>

插件使用方法

以上的checkbox方法是最原始、简单的创建方法，对于管理系统开发者而言大概认为不够好用的。我们通常需要对checkbox进行赋值、清空、事件等操作，通过实例化之后更便于管理。

插件运行方式有四种：

  • ax*属性：对div标签使用axCheckbox属性，再配置children属性即可按默认参数运行插件（此div将作为wrapper包裹checkbox）。
  • ax*属性：对type=hidden的input标签使用axCheckbox属性,，再配置children属性即可按默认参数运行插件。
  • js实例：通过new axCheckbox('#ID')方式创建实例运行。
  • js实例：通过new axCheckbox('')方式创建内存实例运行。
父层创建实例：
input创建实例：
用ID创建实例：
创建内存实例：
F12打开控制台看看，checkbox节点将被新创建的ax-form-wrapper包裹。
注意：以type=hidden隐藏域创建实例，如果是radio类型，在创建实例后会自动删除该隐藏域；而checkbox类型会保留以便于获得多个值。
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='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">input创建实例：</div>
                                            <div class="ax-form-con">
                                            <input name="ck" type="hidden" axCheckbox='children:[{value:"military",label:"军事类"},{value:"figure",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">用ID创建实例：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="checkbox"></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打开控制台看看，checkbox节点将被新创建的ax-form-wrapper包裹。</div>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             let data = [
                                            {value:'military',label:'军事类'},
                                            {value:'figure',label:'人物类'},
                                            {value:'literature',label:'文学类'},
                                            {value:'novel',label:'小说类'}
                                            ];

                                            new axCheckbox('#checkbox',{
                                            children:data
                                            });
                                            console.log(new axCheckbox('',{children:data}));

多种数据格式

参数children用于设置选项内容，每一项包含的属性包含如下：

  • label：设置标签文字
  • value：设置标签值，如果不存在该属性，将以label值来代替value值
  • checked：设置初始checked状态，默认false，可选择true
  • disabled：设置是否禁用，默认为false，可选择true
  • props：设置label标签属性，是一个对象，比如和设置props:{style:'color:red'}
  • callback：项目的回调函数，支持参数obj：{dom:'',label:'',value:'',checked:'',disabled:''}

经常使用的属性是label和value，而children支持的格式写法如下：

  • 标准数组：如[{label:'军事类',value:'military'},{label:'人物类',value:'figure'}]
  • 字符串数组：如['军事类','人物类']，数组中的字符串是label值，插件将取值为value值
  • 一个对象：如{label:'军事类',value:'military'}或{label:'军事类'}
  • 一个字符串：如“军事”
标准数组：
字符串数组：
一个对象：
一个字符串：
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" id="data01"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></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" id="data02"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></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" id="data03"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></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" id="data04"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
  •                                             new axCheckbox('#data01', {
                                                children: [
                                                    { value: 'military', label: '军事类' },
                                                    { value: 'figure', label: '人物类' }
                                                ]
                                            });
                                            new axCheckbox('#data02', {
                                                children: ['军事类','人物类'],
                                            });
                                            new axCheckbox('#data03', {
                                                children: { value: 'military', label: '军事类' },
                                            });
                                            new axCheckbox('#data04', {
                                                children: '军事类',
                                            });

初始化

实例初始化有两种方法，一是对children数组中对象属性checked赋值为true；二是使用参数value，value的写法有两种：

  • 1、字符串，多个值用插件分隔符区分，即分割符应该与separator一致，默认是英文逗号，例如“military,figure”
  • 2、字符串数组，例如['military','figure']

两个初始化方法将以2为优先，也就是说如果同时使用两种方法初始化，将以第二种方法为准。

children数组：
value值：
HTML JS 
  •                                         <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">children数组：</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="init01"></div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">value值：</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input" id="init02"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
  •                                             new axCheckbox('#init01', {
                                                children: [
                                                    { value: 'military', label: '军事类', checked: true },
                                                    { value: 'figure', label: '人物类', checked: true },
                                                    { value: 'literature', label: '文学类' },
                                                    { value: 'novel', label: '小说类' }
                                                ]
                                            });
                                            new axCheckbox('#init02', {
                                                children: [
                                                    { value: 'military', label: '军事类' },
                                                    { value: 'figure', label: '人物类' },
                                                    { value: 'literature', label: '文学类' },
                                                    { value: 'novel', label: '小说类' }
                                                ],
                                                value: 'military,figure'
                                            });

风格

axCheckbox默认的呈现效果是普通的样式，用户可通过style参数更换展示风格，可选风格有chera和switch。

另外默认创建的子项是行内自由分布的，用户可通过display参数设置布局方式，可选的布局方式有grid。如果子项数量是不确定的请用grid。

grid布局默认是一行四列，用户通过columns和gap设置列数和项与项的间距。

chera风格：
chera风格：
grid布局：
block布局：
HTML JS 
  •                                     <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">chera风格：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" id="switch"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">chera风格：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" id="chera"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">grid布局：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" id="grid"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">block布局：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" id="block"></div>
                                            </div>
                                        </div>
                                    </div>
                                        
  •                                             new axCheckbox('#switch',{
                                            style:'switch',
                                            children:[{
                                            value:'figure',
                                            }]
                                            });
                                            new axCheckbox('#chera',{
                                            children:data2,
                                            style:'chera',
                                            });
                                            new axCheckbox('#grid',{
                                            children:data2,
                                            style:'chera',
                                            display:'grid',
                                            gap:'1.4rem',
                                            });
                                            new axCheckbox('#block', {
                                                children: data2,
                                                display: 'block',
                                            });

选项限制

checkbox实例化后的一个重要功能是选项限制，通过limit参数设置允许选择的数量，checkbox下方将实时显示已选择数量和剩余可选择的数量。

允许选择两项：
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" id="limit"></div>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             let data = [
                                            {value:'military',label:'军事类'},
                                            {value:'figure',label:'人物类'},
                                            {value:'literature',label:'文学类'},
                                            {value:'novel',label:'小说类'}
                                            ];

                                            new axCheckbox('#limit',{
                                            limit:2,
                                            children:data
                                            });

其他类型

axCheckbox不仅能实例化checkbox复选，还可以实例化radio单选。通过type:radio设定即可实例化radio单选。单选类型中limit参数将失效，其他参数和操作方法与checkbox类型一样使用。

radio类型：
输出值
HTML JS 
  • 
                                            <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">radio类型：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="radio"></div>
                                            <a href="###" id="radioBtn" class="ax-btn">输出值</a>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             let data = [
                                            {value:'military',label:'军事类'},
                                            {value:'figure',label:'人物类'},
                                            {value:'literature',label:'文学类'},
                                            {value:'novel',label:'小说类'},
                                            ]
                                            let radioIns = new axCheckbox('#radio', {
                                            type:'radio',
                                            name:'read',
                                            children:data
                                            }),
                                            radioBtn = document.querySelector('#radioBtn');
                                            radioBtn.onclick = ()=>{
                                            console.log(radioIns.output);
                                            }

操作方法

创建实例后我们需要使用内置方法进行增删改操作。

  • set：设置checkbox的checked项（覆盖之前的checked项），支持两个参数：设置文本和回调函数
    • arr：值数组或者1个文本值
    • callback：回调函数，支持一个参数：output输出值
  • add：设置checkbox的checked项（不覆盖），支持两个参数：设置文本和回调函数，该方法仅适合checkbox
    • arr：值数组或者1个文本值
    • callback：回调函数，支持value（添加值）和output输出值
  • getValues：获取checkbox的值，支持两个参数
    • type：输出值的类型，默认是array数组，可选择json或string；json类型将输出类似[{label:'军事类',value:'military'},{label:'人物类',value:'figure'}]；string类型输出类似“military,figure”，其中的分隔符使用第二个参数separator来定义
    • separator：输出值string类型的分隔符，默认是英文逗号
  • reset：重置checkbox值恢复初始状态，支持回调函数，回调函数可使用一个参数，即output输出值
  • clear：清空checkbox值，支持回调函数，回调函数可使用一个参数，即output输出值
  • checkedAll：全选checkbox值，支持回调函数，回调函数可使用一个参数，即output输出值

既然需要操作实例，那么便需要了解内置的变量有哪些：

  • this:实例本身
  • this.parent:checkbox的父节点
  • this.limit:选项数量限制的div节点
  • this.trueLimit:真实的限制选项数量，如果参数limit大于children.length，那么trueLimit=children.length
  • this.output:实例输出内容，是一个对象，属性如下：
    • name：字段名
    • value：当前值，是数组，比如['book','travel']
    • parent：checkbox父节点
    • type：checkbox类型，与options.type一致
    • children：子项数组，子项结构类似{label:'',value:'',checked:'',disabled:'',props:'',callback:''}
      • dom：label节点（内部有input）
      • label：选项文本
      • value：选项值
      • checked：选项是否已经checked，true或false
      • disabled：选项是否是禁用状态，true或false
操作：
设置值 添加值 清除值 重置(恢复) 获取值 全选 获取详细，打开F12看控制台
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" id="operate"></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break"></div>

                                            <a href="###" id="set" class="ax-btn">设置值</a>
                                            <a href="###" id="addchecked" class="ax-btn">添加值</a>
                                            <a href="###" id="clear" class="ax-btn">清除值</a>
                                            <a href="###" id="get" class="ax-btn">获取值</a>
                                            <a href="###" id="all" class="ax-btn">全选</a>
                                            <a href="###" id="detail" class="ax-btn">获取详细，打开F12看控制台</a>
                                        
  •                                             let data2 = [
                                            {value:'military',label:'军事类',checked:true,disabled:true},
                                            {value:'figure',label:'人物类'},
                                            {value:'literature',label:'文学类'},
                                            {value:'novel',label:'小说类'},
                                            {value:'textbook',label:'教材类'},
                                            {value:'comic',label:'动漫类'},
                                            {value:'entertainment',label:'娱乐类'},
                                            {value:'other',label:'其他类'}
                                            ]
                                            let optIns = new axCheckbox('#operate', {
                                                limit: 4,
                                                children: data2
                                            }),
                                                set = document.querySelector('#set'),
                                                addchecked = document.querySelector('#addchecked'),
                                                get = document.querySelector('#get'),
                                                all = document.querySelector('#all'),
                                                clear = document.querySelector('#clear'),
                                                reset = document.querySelector('#reset'),
                                                detail = document.querySelector('#detail');
                                
                                            set.onclick = () => {
                                                optIns.set(['comic', 'textbook'], () => {
                                                    alert('checked了“漫画类”和“教材类”');
                                                });
                                            }
                                            addchecked.onclick = () => {
                                                optIns.addChecked('novel', () => {
                                                    alert('checked了“小说类”');
                                                });
                                            }
                                            get.onclick = () => {
                                                console.log('当前值三种类型：');
                                                console.log(optIns.getValues());
                                                console.log(optIns.getValues('json'));
                                                console.log(optIns.getValues('string', '||'));
                                            }
                                            all.onclick = () => {
                                                optIns.checkedAll(() => {
                                                    alert('全选了');
                                                });
                                            }
                                            clear.onclick = () => {
                                                optIns.clear(() => {
                                                    alert('清空了');
                                                });
                                            }
                                            reset.onclick = () => {
                                                optIns.reset(() => {
                                                    alert('重置了');
                                                });
                                            }
                                            detail.onclick = () => {
                                                console.log(optIns.output);
                                            }

监听事件

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

  • set/onSet 设置值后执行，支持参数output，即输出详细
  • reset/onReset 重置值后执行，支持参数output，即输出详细
  • onInit 初始化后执行，支持参数output，即输出详细
  • clear/onClear 清除后执行，支持参数output，即输出详细
  • checkedAll/onCheckedAll 全选后执行，支持参数output，即输出详细
  • exceed/onExceed checked数到极限后执行，支持参数output，即输出详细
  • addChecked/onAddChecked 增加checked项之后执行，支持value（checked项的值）和参数output（输出详细）
  • change/onChange 选项值便更后执行，支持参数output，即输出详细

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

监听：
设置值 添加值 全选值 清除值
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" id="on"></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break"></div>

                                            <a href="###" id="onset" class="ax-btn">设置值</a>
                                            <a href="###" id="onaddchecked" class="ax-btn">添加值</a>
                                            <a href="###" id="onall" class="ax-btn">全选值</a>
                                            <a href="###" id="onclear" class="ax-btn">清除值</a>
                                        
  •                                             let data2 = [
                                            {value:'military',label:'军事类',checked:true,disabled:true},
                                            {value:'figure',label:'人物类'},
                                            {value:'literature',label:'文学类'},
                                            {value:'novel',label:'小说类'},
                                            {value:'textbook',label:'教材类'},
                                            {value:'comic',label:'动漫类'},
                                            {value:'entertainment',label:'娱乐类'},
                                            {value:'other',label:'其他类'}
                                            ]
                                            let onIns = new axCheckbox('#on', {
                                            children:data2,
                                            onInit:()=>{
                                            console.log('初始化了！')
                                            }
                                            }),
                                            onset = document.querySelector('#onset'),
                                            onaddchecked = document.querySelector('#onaddchecked'),
                                            onall = document.querySelector('#onall'),
                                            onclear = document.querySelector('#onclear');
                                            onset.onclick = () => {
                                            onIns.set(['comic','textbook']);
                                            }
                                            onaddchecked.onclick = () => {
                                            onIns.addChecked('novel');
                                            }
                                            onall.onclick = () => {
                                            onIns.checkedAll();
                                            }
                                            onclear.onclick = () => {
                                            onIns.clear();
                                            }
                                            onIns.on('set', (obj) => {
                                            console.log('重设置了值：'+obj.value)
                                            }).on('clear', () => {
                                            console.log('清空了')
                                            }).on('checkedAll', () => {
                                            console.log('全选了')
                                            }).on('exceed', () => {
                                            console.log('选项数量到极限了');
                                            }).on('change', (obj) => {
                                            console.log('变更了选项');
                                            }).on('addChecked', (value) => {
                                            console.log('新增了选项checked：'+value);
                                            });

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axCheckbox('#id',{
                                 insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
                                type: 'checkbox', //input类型，默认checkbox，可选择radio
                                style: 'beautify', //显示风格，默认是beautify美化原生，可选择chera风格或switch风格
                                name: '', //字段名
                                children:[],//设置子项，可以是一个对象(一个子项)，也可以是一个数组(多个子项)，可使用的参数如下：
                                /* [{
                                checked: false, //设置默认checked，默认为false
                                disabled: false, //设置禁用，默认false不禁用，可使用true禁用
                                value: '', //设置值
                                label: '', //设置标签文字
                                props: {}, //设置其他属性(对label设置)
                                callback: '', //设置回调函数，支持参数obj：{dom:'',label:'',value:'',checked:'',disabled:''}
                                }], */
                                value: '',//初始值，字符串格式，比如“traval,read”
                                limit: 0, //最多选择几项，默认为0不限制
                                language:{
                                    limit: `已输入<i have>0</i>个字符,还可以输入<i remainder><# this.value #></i>个字`,//字数限制提示
                                },
                                separator: ',',//定义输出字符串值的分隔符，默认是英文逗号
                                size: '', //统一设置子项尺寸,可以填xs、sm、md或lg
                                parentClass: '', //设置父层样式名，一个或多个，多个以英文逗号或空格分开
                                childClass: '',//每一项div的样式名，一个或多个，多个以英文逗号或空格分开
                                props: '', //设置父层其他属性，比如props:{role:'',display:''}
                                display: '', //子项布局方式，默认为空表示子项行内布局，label宽度随内容自由伸缩，可选择grid或block
                                gap: '', //如果grid布局,那么可以使用该参数定义子项之间的，比如1.4rem
                                columns: 0, //设置列数，默认为0表示子项行内布局，如果大于0将启用grid布局
                                fenceShow:false,//针对grid布局，设置是否显示项目之间的边距，默认false不显示，可选择true显示
                                clearShow: true, //当toolsShow: true的时候是否显示清除按钮，默认true显示，可选择false不显示
                                breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
                                onClear: '', //清除值后的回调函数，支持参数output，即输出详细
                                onSet: '', //设置值后的回调函数，支持参数output，即输出详细
                                onReset: '', //重置值后的回调函数，支持参数output，即输出详细
                                onAddChecked: '', //追加项后的回调函数，支持参数output，即输出详细
                                onExceed: '', //checked项数超过设定值后的回调函数，支持参数output，即输出详细
                                onInit: '', //初始化后的回调函数，支持参数output，即输出详细
                                onChange: '', //初始化后的回调函数，支持参数output，即输出详细
                                });
                                });
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"