title: checkbox-group 多项选择器组 header: develop nav: component sidebar: formlist_checkbox-group

webUrl: https://qft12m.smartapps.cn/component/checkbox/checkbox

解释：多项选择器组，内部由多个 checkbox 组成

属性说明

属性名 类型 默认值 必填 说明
bindchange EventHandle 否 <checkbox-group/>中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/checkbox/checkbox - 图1 请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">默认样式</view>
  3.     <checkbox-group name="checkbox">
  4.         <label class="block border-bottom">
  5.             <checkbox value="checkbox1" checked>多选项一</checkbox>
  6.         </label>
  7.         <label class="block border-bottom">
  8.             <checkbox  value="checkbox2">多选项二</checkbox>
  9.         </label>
  10.     </checkbox-group>
  11. </view>

:::

代码示例2 - 列表展示

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">列表展示</view>
  3.     <checkbox-group bindchange="checkboxChange">
  4.         <label class="block border-bottom" s-for="item in items">
  5.             <checkbox class="check-box" value="{{item.value}}" checked="{{item.checked}}" id="{{item.id}}">{{item.text}}</checkbox>
  6.         </label>
  7.     </checkbox-group>
  8. </view>
  1. Page({
  2.     data: {
  3.         items: [
  4.             {
  5.                 text: '多选项一',
  6.                 checked: true,
  7.                 id: '1'
  8.             },
  9.             {
  10.                 text: '多选项二',
  11.                 id: '2'
  12.             },
  13.             {
  14.                 text: '多选项三',
  15.                 id: '3'
  16.             }
  17.         ]
  18.     }
  19. });

:::

代码示例3 - 包含禁用选项

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>包含禁用选项</view>
  4.         <view>disabled</view>
  5.     </view>
  6.     <checkbox-group bindchange="checkboxChange" >
  7.         <label class="block border-bottom">              
  8.             <checkbox value="checkbox1" checked/>可用选项
  9.         </label>
  10.         <label class="block border-bottom">              
  11.             <checkbox value="checkbox1"/>可用选项
  12.         </label>
  13.         <label class="block border-bottom">
  14.             <checkbox value="checkbox1" disabled color="#ccc"/>
  15.             <text class="disabledText">禁用选项</text>
  16.         </label>
  17.         <label class="block border-bottom">
  18.             <checkbox value="checkbox1" disabled color="#C3D1FF" checked/>
  19.             <text class="disabledText">禁用选项</text>
  20.         </label>
  21.     </checkbox-group>
  22. </view>

:::

代码示例4 - 默认不选中

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>默认不选中</view>
  4.         <view>checked="false"</view>
  5.     </view>
  6.     <checkbox-group bindchange="checkboxChange" >
  7.         <label class="block border-bottom">
  8.             <checkbox value="checkbox1" checked/>多选项一
  9.         </label>
  10.         <label class="block border-bottom">
  11.             <checkbox value="checkbox1"/>多选项二
  12.         </label>
  13.     </checkbox-group>
  14. </view>

:::

代码示例5 - 自定义颜色

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>自定义颜色</view>
  4.         <view>color="#00BC89"</view>
  5.     </view>
  6.     <checkbox-group bindchange="checkboxChange" >
  7.         <label class="block border-bottom">
  8.             <checkbox value="checkbox1" color="#00BC89" checked/>选项名称
  9.         </label>
  10.         <label class="block border-bottom">
  11.             <checkbox color="#00BC89" value="checkbox1"/>选项名称
  12.         </label>
  13.     </checkbox-group>
  14. </view>

:::