快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

多选框 Checkbox

概述

基础组件,触发业务逻辑时使用。

多选框 Checkbox

用法:设置类j-checkbox标记label标签,来定义多选框。如:

<label class="j-checkbox j-is-checked" role="checkbox" aria-checked="true">
    <span class="j-checkbox-input j-is-checked" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
<label class="j-checkbox" role="checkbox">
    <span class="j-checkbox-input" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
Checkbox 禁用状态

设置类j-is-disabled来定义Checkbox的禁用状态。如:

<label class="j-checkbox j-is-checked j-is-disabled" role="checkbox" aria-checked="true" aria-disabled="true">
    <span class="j-checkbox-input j-is-checked j-is-disabled" aria-checked="mixed" aria-disabled="true">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
<label class="j-checkbox j-is-disabled" role="checkbox" aria-disabled="true">
    <span class="j-checkbox-input j-is-disabled" aria-disabled="true">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
多选框组 Checkbox Group

用法:设置类j-checkbox-group来定义多选框组。如:

<div class="j-checkbox-group">
    <label class="j-checkbox j-is-checked" role="checkbox" aria-checked="true">
        <span class="j-checkbox-input j-is-checked" aria-checked="mixed">
            <span class="j-checkbox-inner"></span>
            <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
        </span>
        <span class="j-checkbox-label">备选项</span>
    </label>
    <label class="j-checkbox" role="checkbox">
        <span class="j-checkbox-input" aria-checked="mixed">
            <span class="j-checkbox-inner"></span>
            <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
        </span>
        <span class="j-checkbox-label">备选项</span>
    </label>
    <label class="j-checkbox j-is-checked j-is-disabled" role="checkbox" aria-checked="true" aria-disabled="true">
        <span class="j-checkbox-input j-is-checked j-is-disabled" aria-checked="mixed" aria-disabled="true">
            <span class="j-checkbox-inner"></span>
            <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
        </span>
        <span class="j-checkbox-label">已选禁用选项</span>
    </label>
    <label class="j-checkbox j-is-disabled" role="checkbox" aria-disabled="true">
        <span class="j-checkbox-input j-is-disabled" aria-disabled="true">
            <span class="j-checkbox-inner"></span>
            <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
        </span>
        <span class="j-checkbox-label">禁用选项</span>
    </label>
</div>
部分选择多选框

设置类j-is-indefinite定义这是部分选择的多选框。

<label class="j-checkbox" role="checkbox" aria-checked="mixed">
    <span class="j-checkbox-input j-is-indefinite" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="">
    </span>
    <span class="j-checkbox-label">部分选择</span>
</label>
Checkbox 按钮组

设置类j-checkbox-button来定义Checkbox的按钮组。如:

<div class="j-checkbox-group" roll="group" aria-label="checkbox-group">
    <label class="j-checkbox-button j-is-checked" role="checkbox" aria-checked="true">
        <input type="checkbox" class="j-checkbox-button-original" value="周一">
        <span class="j-checkbox-button-inner">周一</span>
    </label>
    <label class="j-checkbox-button" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周二">
        <span class="j-checkbox-button-inner">周二</span>
    </label>
    <label class="j-checkbox-button j-is-checked" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周三">
        <span class="j-checkbox-button-inner">周三</span>
    </label>
    <label class="j-checkbox-button j-is-disabled" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周四" disabled="disabled">
        <span class="j-checkbox-button-inner">周四</span>
    </label>
    <label class="j-checkbox-button j-is-disabled" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周五" disabled="disabled">
        <span class="j-checkbox-button-inner">周五</span>
    </label>
</div>
不同尺寸的多选框按钮组

设置类j-checkbox-button-*定义不同尺寸的多选框按钮组,*为尺寸值,包含4种:默认、mediumsmallmini

<div class="j-checkbox-group" roll="group" aria-label="checkbox-group">
    <label class="j-checkbox-button j-is-checked" role="checkbox" aria-checked="true">
        <input type="checkbox" class="j-checkbox-button-original" value="周一">
        <span class="j-checkbox-button-inner">周一</span>
    </label>
    <label class="j-checkbox-button" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周二">
        <span class="j-checkbox-button-inner">周二</span>
    </label>
    <label class="j-checkbox-button j-is-disabled" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周四" disabled="disabled">
        <span class="j-checkbox-button-inner">周三</span>
    </label>
</div>
<div class="j-checkbox-group" roll="group" aria-label="checkbox-group">
    <label class="j-checkbox-button j-is-checked j-checkbox-button-medium" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周二">
        <span class="j-checkbox-button-inner">周一</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-medium" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周三">
        <span class="j-checkbox-button-inner">周二</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-medium j-is-disabled" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周四" disabled="disabled">
        <span class="j-checkbox-button-inner">周三</span>
    </label>
</div>
<div class="j-checkbox-group" roll="group" aria-label="checkbox-group">
    <label class="j-checkbox-button j-is-checked j-checkbox-button-small" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周三">
        <span class="j-checkbox-button-inner">周一</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-small" role="checkbox" aria-checked="true">
        <input type="checkbox" class="j-checkbox-button-original" value="周一">
        <span class="j-checkbox-button-inner">周二</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-small j-is-disabled" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周五" disabled="disabled">
        <span class="j-checkbox-button-inner">周三</span>
    </label>
</div>
<div class="j-checkbox-group" roll="group" aria-label="checkbox-group">
    <label class="j-checkbox-button j-is-checked j-checkbox-button-mini" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周四">
        <span class="j-checkbox-button-inner">周一</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-mini" role="checkbox">
        <input type="checkbox" class="j-checkbox-button-original" name="" id="" value="周三">
        <span class="j-checkbox-button-inner">周二</span>
    </label>
    <label class="j-checkbox-button j-checkbox-button-mini j-is-disabled" role="checkbox" aria-disabled="true">
        <input type="checkbox" class="j-checkbox-button-original" value="周一" disabled="disabled">
        <span class="j-checkbox-button-inner">周三</span>
    </label>
</div>
Checkbox 幽灵按钮选项

设置j-is-ghost定义幽灵按钮选项。如:

<label class="j-checkbox j-is-ghost j-is-checked" role="checkbox" aria-checked="true">
    <span class="j-checkbox-input j-is-checked" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="备选项" name="" id="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
不同尺寸的幽灵按钮选项

设置类j-checkbox-*定义幽灵按钮选项的不同尺寸,*为尺寸值,包括4种:默认、mediumsmallmini

<label class="j-checkbox j-is-ghost j-is-checked" role="checkbox" aria-checked="true">
    <span class="j-checkbox-input j-is-checked" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="备选项" name="" id="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
<label class="j-checkbox j-checkbox-medium j-is-ghost" role="checkbox">
    <span class="j-checkbox-input" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="备选项" name="" id="">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
<label class="j-checkbox j-checkbox-small j-is-ghost j-is-checked j-is-disabled" role="checkbox" aria-disabled="true">
    <span class="j-checkbox-input j-is-checked" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="备选项" name="" id="" disabled="disabled">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
<label class="j-checkbox j-checkbox-mini j-is-ghost j-is-disabled" role="checkbox" aria-disabled="true">
    <span class="j-checkbox-input" aria-checked="mixed">
        <span class="j-checkbox-inner"></span>
        <input type="checkbox" class="j-checkbox-original" aria-hidden="true" value="备选项" name="" id="" disabled="disabled">
    </span>
    <span class="j-checkbox-label">备选项</span>
</label>
上一章:单选框 Radio
下一章:选择器 Select