- checkbox-group 多项选择器组
- 属性说明
- 示例
- 代码示例 1：默认样式
- 代码示例 2：列表展示
- 代码示例 3：包含禁用选项
- 代码示例 4：默认不选中
- 代码示例 5：自定义颜色
checkbox-group 多项选择器组
解释：多项选择器组，内部由多个 checkbox 组成。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
|
bindchange |
EventHandle |
否 |
checkbox-group 中选中项发生改变时触发 change 事件， |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：默认样式
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">默认样式</view><label class="block border-bottom"><checkbox checked>多选项一</checkbox></label><label class="block border-bottom"><checkbox>多选项二</checkbox></label></view></view>
代码示例 2：列表展示
- SWAN
- JS
<view class="wrap"><view class="top-description border-bottom">列表展示</view><checkbox-group bindchange="checkboxChange"><label class="block border-bottom" s-for="item in items"><checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</checkbox></label></checkbox-group></view>
代码示例 3：包含禁用选项
- SWAN
- JS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>包含禁用选项</view><view>disabled</view></view><label class="block border-bottom"><checkbox value="checkbox1" checked>可用选项</checkbox></label><label class="block border-bottom"><checkbox value="checkbox2">可用选项 </checkbox></label><label class="block border-bottom"><checkbox value="checkbox3" disabled color="#C3D1FF" checked></checkbox><text class="disabledText">禁用选项</text></label><label class="block border-bottom"><checkbox value="checkbox4" disabled color="#ccc"></checkbox><text class="disabledText">禁用选项</text></label></view></view>
代码示例 4：默认不选中
- SWAN
- JS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>默认不选中</view><view>checked="false"</view></view><checkbox-group bindchange="checkboxChange" ><label class="block border-bottom"><checkbox value="checkbox1" checked>多选项一</checkbox></label><label class="block border-bottom"><checkbox value="checkbox2">多选项二</checkbox></label></checkbox-group></view></view>
代码示例 5：自定义颜色
- SWAN
- JS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>自定义颜色</view><view>color="#00BC89"</view></view><checkbox-group bindchange="checkboxChange" ><label class="block border-bottom"><checkbox value="checkbox1" color="#00BC89" checked>选项名称</checkbox></label><label class="block border-bottom"><checkbox value="checkbox2" color="#00BC89">选项名称</checkbox></label></checkbox-group></view></view>
