首页 / 组件 / 多选按钮组件

多选按钮组件

多选按钮允许用户从一组选项中选择多个选项。通常用于需要同时选择多个特性、配置或标签的场景，如云服务器附加功能选择。

表单控件 选择器

基础用法

最基本的多选按钮组件，点击可以选中或取消选中。

选择云服务器附加功能：
已选： 2项附加功能
附加费用： ¥70/月
示例代码 
<div class="checkbox-wrapper">
    <div class="checkbox-group">
        <div style="font-weight: 600; margin-bottom: 5px; font-size: 14px;">选择云服务器附加功能：</div>
        <label class="checkbox-item">
            <div class="checkbox-box checked"></div>
            <span class="checkbox-label">数据备份（¥20/月）</span>
        </label>
        <label class="checkbox-item">
            <div class="checkbox-box checked"></div>
            <span class="checkbox-label">负载均衡（¥50/月）</span>
        </label>
        <label class="checkbox-item">
            <div class="checkbox-box"></div>
            <span class="checkbox-label">安全防护（¥30/月）</span>
        </label>
        <label class="checkbox-item">
            <div class="checkbox-box"></div>
            <span class="checkbox-label">性能监控（¥15/月）</span>
        </label>
    </div>
</div>

禁用状态

多选按钮可以设置为禁用状态，此时用户无法更改其选中状态。

示例代码 
<div class="checkbox-wrapper">
    <div class="checkbox-group">
        <label class="checkbox-item disabled">
            <div class="checkbox-box checked"></div>
            <span class="checkbox-label">已禁用-选中</span>
        </label>
        <label class="checkbox-item disabled">
            <div class="checkbox-box"></div>
            <span class="checkbox-label">已禁用-未选中</span>
        </label>
    </div>
</div>

多选组

多个多选按钮可以组合在一起，形成一个多选组。

选择开通的服务：
示例代码 
<div class="checkbox-wrapper">
    <div class="checkbox-group">
        <div style="font-weight: 600; margin-bottom: 10px; font-size: 14px;">选择开通的服务：</div>
        <label class="checkbox-item">
            <div class="checkbox-box checked"></div>
            <span class="checkbox-label">云服务器</span>
        </label>
        <div style="margin-left: 20px;">
            <label class="checkbox-item">
                <div class="checkbox-box checked"></div>
                <span class="checkbox-label">数据备份</span>
            </label>
            <label class="checkbox-item">
                <div class="checkbox-box"></div>
                <span class="checkbox-label">性能监控</span>
            </label>
        </div>
        <label class="checkbox-item">
            <div class="checkbox-box checked"></div>
            <span class="checkbox-label">对象存储</span>
        </label>
    </div>
</div>

不确定状态

多选按钮可以设置为不确定状态（indeterminate），通常用于表示子选项部分选中的情况。

示例代码 
<div class="checkbox-wrapper">
    <div class="checkbox-group">
        <label class="checkbox-item">
            <div class="checkbox-box indeterminate"></div>
            <span class="checkbox-label">全选</span>
        </label>
        <div style="margin-left: 20px; margin-top: 10px;">
            <label class="checkbox-item">
                <div class="checkbox-box checked"></div>
                <span class="checkbox-label">选项1</span>
            </label>
            <label class="checkbox-item">
                <div class="checkbox-box"></div>
                <span class="checkbox-label">选项2</span>
            </label>
            <label class="checkbox-item">
                <div class="checkbox-box checked"></div>
                <span class="checkbox-label">选项3</span>
            </label>
        </div>
    </div>
</div>

带边框的多选按钮

多选按钮可以添加边框样式，使其更加醒目。

示例代码 
<div class="checkbox-wrapper">
    <div class="checkbox-group">
        <label class="checkbox-item checkbox-bordered">
            <div class="checkbox-box checked"></div>
            <div class="checkbox-content">
                <span class="checkbox-label">标准套餐</span>
                <span class="checkbox-desc">2核4G内存</span>
            </div>
        </label>
        <label class="checkbox-item checkbox-bordered">
            <div class="checkbox-box"></div>
            <div class="checkbox-content">
                <span class="checkbox-label">高级套餐</span>
                <span class="checkbox-desc">4核8G内存</span>
            </div>
        </label>
    </div>
</div>

<style>
.checkbox-item.checkbox-bordered {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    transition: all 0.3s;
}
.checkbox-content {
    display: flex;
    flex-direction: column;
}
.checkbox-desc {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}
</style>

API

多选按钮组件的属性和类

属性 说明 类型 默认值
checkbox-item 多选按钮项基础类 string -
checkbox-box 复选框样式类 string -
checkbox-label 复选框标签类 string -
checked 标记复选框为选中状态 string -
indeterminate 标记复选框为不确定状态 string -
disabled 禁用复选框 string -
checkbox-group 多选按钮组容器 string -