Checkbox 复选

使用方法

label追加ax-checkbox类,将radio和对应的文字装入即可。基本结构如下:

                                <label class="ax-checkbox"><input name="" value="" type="checkbox"><span>文字</span></label>
                            

块分布

label追加ax-chera类,将checkbox和对应的文字装入即可。基本结构如下:

                                <label class="ax-chera"><input name="" value="0" type="checkbox"><span>文字</span></label>
                            

占满均分布局

ax-flex-block作为外围可实现占满平均布局。

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-flex-block">
                                <div class="ax-row">
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                            
复选:
复选:
复选风格:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选:</div>
                                <div class="ax-flex-block">
                                <div class="ax-row">
                                <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <div class="ax-col ax-col-6"><label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选:</div>
                                <div class="ax-flex-block">
                                <div class="ax-row">
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>文学类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>小说类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>教材类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="1" type="checkbox"><span>动漫类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <div class="ax-col ax-col-3"><label class="ax-checkbox"><input name="fix-bike-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选风格:</div>
                                <div class="ax-flex-block">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-row">
                                <div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-draw" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                            

自定义宽度均分布局

对外围标签设定固定宽度,单选项将在此宽度内平均分布。

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div style="width:400px;">
                                <div class="ax-row">
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                            
复选(定宽400px):
单选(定宽600px):
复选风格:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选(定宽400px):</div>
                                <div style="width:400px;">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-long-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">单选(定宽600px):</div>
                                <div style="width:600px;">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cow-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选风格:</div>
                                <div style="width:600px;">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div style="width:600px;">
                                <div class="ax-row">
                                <div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-big" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                            

表单定宽均分布局

如果表单中还有其他输入控件,可以使用ax-form-input来统一外围宽度,宽度是460px。

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label></div>
                                <div class="ax-col ax-col-12"><label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            
复选:
复选风格:
姓名:
评论内容:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选风格:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="1" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论内容:</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea></div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-24"><label class="ax-checkbox"><input name="fix-paper" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            

自由布局

根据外围宽度自由填充单选项,不过由于单选项长度不一而导致视觉上不整齐。

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-flex-block">
                                <div class="ax-flex-block"><label class="ax-checkbox"><input name="" value="0" checked="" type="checkbox"><span>文字</span></label>
                                <label class="ax-checkbox"><input name="" value="1" type="checkbox"><span>文字</span></label>
                                </div>
                                </div>
                                </div>
                                </div>
                            
复选:
复选:
复选风格:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选:</div>
                                <div class="ax-flex-block">
                                <div class="ax-flex-block"><label class="ax-checkbox"><input name="free-apple" value="0" checked="" type="checkbox"><span>军事类</span></label>
                                <label class="ax-checkbox"><input name="free-apple" value="1" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-checkbox"><input name="free-apple" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
                                <label class="ax-checkbox"><input name="free-apple-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
                                </div>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选:</div>
                                <div class="ax-flex-block"><label class="ax-checkbox"><input name="free-orange" value="0" checked="" type="checkbox"><span>军事类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>文学类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>小说类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>教材类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>动漫类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>历史类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="1" type="checkbox"><span>人文类</span></label>
                                <label class="ax-checkbox"><input name="free-orange" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
                                <label class="ax-checkbox"><input name="free-orange-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">复选风格:</div>
                                <div class="ax-flex-block">
                                <label class="ax-chera"><input name="free-girl" value="0" checked="" type="checkbox"><span>军事类</span></label>
                                <label class="ax-chera"><input name="free-girl" value="1" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-chera"><input name="free-girl" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
                                <label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
                                </div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-flex-block"><label class="ax-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><span>阅读《XXX使用协议》</span></label>
                                </div>
                                </div>
                                </div>
                                </div>
                            

复选开关

对label追加ax-switch类即可。

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-flex-block"><label class="ax-switch"><input name="" value="0" type="checkbox" checked=""><span></span></label></div>
                                </div>
                                </div>
                            
开关已开:
开关未开:
开关禁止:
开关禁止(已选择):
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">开关已开:</div>
                                <div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox" checked=""><span></span></label></div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">开关未开:</div>
                                <div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox"><span></span></label></div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">开关禁止:</div>
                                <div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" disabled="" type="checkbox"><span></span></label></div>
                                </div>
                                </div>

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

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">开关禁止(已选择):</div>
                                <div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" checked="" disabled="" type="checkbox"><span></span></label></div>
                                </div>
                                </div>
                            

不同尺寸

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

高22px的ax-xs。

                                <div style="line-height:22px;">
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" checked type="checkbox"><span>军事类</span></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-checkbox ax-xs"><input name="pen03" value="0" type="checkbox"><span>娱乐类</span></label>
                                </div>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="checkbox"><span>娱乐类</span></label></div>
                                </div>
                                <label class="ax-switch ax-xs"><input name="check01" value="0" type="checkbox" checked><span></span></label>
                            

高28px的ax-sm。

                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" checked type="checkbox"><span>军事类</span></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-checkbox ax-sm"><input name="pen05" value="0" type="checkbox"><span>娱乐类</span></label>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="checkbox"><span>娱乐类</span></label></div>
                                </div>
                                <label class="ax-switch ax-sm"><input name="check02" value="0" type="checkbox" checked><span></span></label>
                            

高48px的ax-lg。

                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" checked type="checkbox"><span>军事类</span></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><span>人物志类</span></label>
                                <label class="ax-checkbox ax-lg"><input name="pen07" value="0" type="checkbox"><span>娱乐类</span></label>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="checkbox"><span>军事类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><span>人物志类</span></label></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="checkbox"><span>娱乐类</span></label></div>
                                </div>
                                <label class="ax-switch ax-lg"><input name="check03" value="0" type="checkbox" checked><span></span></label>
                            

插件使用方法

以上的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类型会保留以便于获得多个值。
  •                                             <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}));
                                            

风格

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

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

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

chera风格:
chera风格:
grid布局:
  •                                             <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>
                                            
  •                                             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',
                                                });
                                            

选项限制

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

允许选择两项:
  •                                             <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类型:
  • 
                                                <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类型的分隔符,默认是英文逗号
  • 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
  •                                             <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'),
                                                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('清空了');
                                                });
                                                }
                                                detail.onclick = () => {
                                                console.log(optIns.output);
                                                }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

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

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

  •                                             <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',{
                                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:''}
                                }], */
                                limit: 0, //最多选择几项,默认为0不限制
                                separator: ',',//定义输出字符串值的分隔符,默认是英文逗号
                                size: '', //统一设置子项尺寸,可以填xs、sm、md或lg
                                className: '', //设置父层样式名
                                props: '', //设置父层其他属性,比如props:{role:'',display:''}
                                display: '', //子项布局方式,默认为空表示子项行内布局,label宽度随内容自由伸缩,可选择grid
                                gap: '', //如果grid布局,那么可以使用该参数定义子项之间的,比如1.4rem
                                columns: 0, //设置列数,默认为0表示子项行内布局,如果大于0将启用grid布局
                                clearShow: true, //当toolsShow: true的时候是否显示清除按钮,默认true显示,可选择false不显示
                                onClear: '', //清除值后的回调函数,支持参数output,即输出详细
                                onSet: '', //设置值后的回调函数,支持参数output,即输出详细
                                onAddChecked: '', //追加项后的回调函数,支持参数output,即输出详细
                                onExceed: '', //checked项数超过设定值后的回调函数,支持参数output,即输出详细
                                onInit: '', //初始化后的回调函数,支持参数output,即输出详细
                                onChange: '', //初始化后的回调函数,支持参数output,即输出详细
                                });
                                });